HTML5边玩边学（六）-汽车人，变形的详细介绍

代码



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="canvas1" width="250" height="300" 

 onmousedown="trans.transform(event);" 

 onmouseup="trans.init(event);" 

 onmousemove="trans.translate(event);" 

 style="background-color:black">

 你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

<input type="radio" name="r" id="r1" checked="checked">移动——在图像上按住鼠标并移动<br />

<input type="radio" name="r" id="r2">基准点缩放——在图像某点处按住鼠标<br />

<input type="radio" name="r" id="r3">基准点旋转——在图像某点处按住鼠标<br />

<input type="radio" name="r" id="r4">基准点缩放同时旋转——在图像某点处按住鼠标<br />



<canvas id="canvas3" width="250" height="300" style="background-color:black">

 你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

<input type="button" onclick="move(1);" value="移动裁剪区域">

<input type="button" onclick="move(2);" value="移动蒙版">

<input type="button" onclick="stop();" value="停止移动"><br />



 <div>

 <table>

 <tr>

 <td><canvas id="tut0" width="125" height="125"></canvas><br/><label id="lab0"></label></td>

 <td><canvas id="tut1" width="125" height="125"></canvas><br/><label id="lab1"></label></td>

 <td><canvas id="tut2" width="125" height="125"></canvas><br/><label id="lab2"></label></td>

 <td><canvas id="tut3" width="125" height="125"></canvas><br/><label id="lab3"></label></td>

 </tr>

 <tr>

 <td><canvas id="tut4" width="125" height="125"></canvas><br/><label id="lab4"></label></td>

 <td><canvas id="tut5" width="125" height="125"></canvas><br/><label id="lab5"></label></td>

 <td><canvas id="tut6" width="125" height="125"></canvas><br/><label id="lab6"></label></td>

 <td><canvas id="tut7" width="125" height="125"></canvas><br/><label id="lab7"></label></td>

 </tr>

 <tr>

 <td><canvas id="tut8" width="125" height="125"></canvas><br/><label id="lab8"></label></td>

 <td><canvas id="tut9" width="125" height="125"></canvas><br/><label id="lab9"></label></td>

 <td><canvas id="tut10" width="125" height="125"></canvas><br/><label id="lab10"></label></td>

 <td><canvas id="tut11" width="125" height="125"></canvas><br/><label id="lab11"></label></td>

 </tr>

 </table>

 </div>





<script type="text/javascript">

 //美女图的 Base64 编码

 IMG_SRC='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwA......';//省略四十字节



 //==========================================

 //基准点变形类

 //==========================================

 function Transform(){

 //获取画布对象

 this.ctx = document.getElementById("canvas1").getContext("2d");

 //创建图像对象

 this.img=new Image();

 //指定图像源

 this.img.src=IMG_SRC;

 this.interval = null;

 //鼠标按钮状态

 this.pressed=false;

 this.init();

 }

 

 //初始化图形

 Transform.prototype.init=function(){

 //鼠标按钮状态

 this.pressed=false;

 //停止计时器

 if(this.interval) clearInterval(this.interval);

 //变化值

 this.delta = 0.06;

 //清空

 this.ctx.clearRect(0,0,250,300);

 //重绘

 this.paint();

 }

 

 //绘制图像

 Transform.prototype.paint=function(){

 var that=this;

 var img=this.img

 if(img.complete)

 that.ctx.drawImage(img,0,0);

 else 

 var interval = setInterval(function(){

 if(img.complete){

 that.ctx.drawImage(img,0,0);

 clearInterval(interval);

 }

 },300);

 }

 

 //鼠标按钮按下后，开始变形

 Transform.prototype.transform = function(){

 //获取基准点

 this.dx=event.offsetX;

 this.dy=event.offsetY;

 //获取基准点

 this.startx=event.offsetX;

 this.starty=event.offsetY;

 //初始缩放比例

 this.sc=1;

 //初旋转角度

 this.angle=0;

 

 var that=this;

 if(document.getElementById("r1").checked)

 //鼠标按钮状态

 this.pressed=true;

 else if(document.getElementById("r2").checked)

 this.interval = setInterval(function(){that.scale()},50);

 else if((document.getElementById("r3").checked))

 this.interval = setInterval(function(){that.rotate()},50);

 else 

 this.interval = setInterval(function(){that.scaleAndRotate()},50);

 }

 

 //移动

 Transform.prototype.translate = function(){

 this.ddx=event.offsetX-this.startx;

 this.ddy=event.offsetY-this.starty;

 if(this.pressed){

 //清空

 this.ctx.clearRect(0,0,250,300);

 //保存状态

 this.ctx.save();

 //平移

 this.ctx.translate(this.ddx,this.ddy);

 //重绘

 this.paint();

 //绘制基准点

 this.ctx.fillStyle="red";

 this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

 //恢复状态

 this.ctx.restore();

 }

 }



 //缩放变形

 Transform.prototype.scale = function(){

 //清空

 this.ctx.clearRect(0,0,250,300);

 //改变缩放比例

 this.sc=this.sc - this.delta;

 if(this.sc<0.2 || this.sc>2) 

 this.delta = -this.delta;

 //保存状态

 this.ctx.save();

 //以 (dx,dy) 为基准点进行 (sx,sy)比例缩放：transform(sx, 0, 0, sy, dx(1-sx), dy(1-sy))

 this.ctx.transform(this.sc, 0, 0, this.sc, this.dx*(1-this.sc), this.dy*(1-this.sc))

 //用新的变形矩阵重绘

 this.paint();

 //绘制基准点

 this.ctx.fillStyle="red";

 this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

 //恢复状态

 this.ctx.restore();

 }

 

 //旋转变形

 Transform.prototype.rotate = function(){

 //清空

 this.ctx.clearRect(0,0,250,300);

 //改变缩放比例

 var PI = Math.PI;

 this.angle=this.angle + PI/60;

 //保存状态

 this.ctx.save();

 //以 (dx,dy) 为基准点旋转角度 A：transform(cosA, sinA, -sinA, cosA, dx(1-cosA) + dysinA, dy(1-cosA) - dxsinA)

 this.ctx.transform(Math.cos(this.angle), Math.sin(this.angle), 

 -Math.sin(this.angle), Math.cos(this.angle), 

 this.dx*(1-Math.cos(this.angle)) + this.dy*Math.sin(this.angle), 

 this.dy*(1-Math.cos(this.angle)) - this.dx*Math.sin(this.angle))

 //用新的变形矩阵重绘

 this.paint();

 //绘制基准点

 this.ctx.fillStyle="red";

 this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

 //恢复状态

 this.ctx.restore();

 }

 

 //即缩放又旋转变形,没有使用变形矩阵

 Transform.prototype.scaleAndRotate = function(){

 //清空

 this.ctx.clearRect(0,0,250,300);

 //改变缩放比例

 this.sc=this.sc - this.delta;

 if(this.sc<0.2 || this.sc>2) 

 this.delta = -this.delta;

 var PI = Math.PI;

 this.angle=this.angle + PI/60;

 //保存状态

 this.ctx.save();

 //先移动原点到基点

 this.ctx.translate(this.dx,this.dy);

 this.ctx.scale(this.sc,this.sc);

 this.ctx.rotate(this.angle);

 this.ctx.translate(-this.dx,-this.dy);

 //用新的变形矩阵重绘

 this.paint();

 //绘制基准点

 this.ctx.fillStyle="red";

 this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

 //恢复状态

 this.ctx.restore();

 }

 

 var trans = new Transform();

 

 //==========================================

 function Clip(){

 var canvas = document.getElementById("canvas3");

 this.ctx = canvas.getContext("2d");

 this.img=new Image();

 this.img.src=IMG_SRC;

 //移动方向

 this.delta=[3,3];

 //起始点

 this.pos_x = 225;

 this.pos_y = 120;

 //半径

 this.radius = 40;

 //画布的长和宽

 this.w = parseInt(canvas.getAttribute("width"));

 this.h = parseInt(canvas.getAttribute("height"));

 }

 

 Clip.prototype.draw1=function(){

 //碰撞检测

 if (this.pos_x < this.radius) {

 this.delta[0] = Math.random() % 4 + 5;

 } else if (this.pos_x > this.w - this.radius) {

 this.delta[0] = -(Math.random() % 4 + 5);

 }

 if (this.pos_y < this.radius) {

 this.delta[1] = Math.random() % 4 + 5;

 } else if (this.pos_y > this.h - this.radius) {

 this.delta[1] = -(Math.random() % 4 + 5);

 }

 this.pos_x += this.delta[0];

 this.pos_y += this.delta[1];



 this.ctx.clearRect(0, 0, this.w, this.h);

 //保存状态

 this.ctx.save()

 //移动变形

 this.ctx.translate(this.pos_x,this.pos_y);

 //设置裁剪区域

 this.ctx.beginPath();

 this.ctx.arc(0 ,0,this.radius,0,Math.PI*2,true);

 this.ctx.clip(); 

 // 将图片画到画布上

 this.ctx.drawImage(this.img, -this.pos_x, -this.pos_y,this.w, this.h);

 //恢复状态

 this.ctx.restore();

 }

 

 Clip.prototype.draw2=function(){

 //碰撞检测

 if (this.pos_x < this.radius) {

 this.delta[0] = Math.random() % 4 + 5;

 } else if (this.pos_x > this.w - this.radius) {

 this.delta[0] = -(Math.random() % 4 + 5);

 }

 if (this.pos_y < this.radius) {

 this.delta[1] = Math.random() % 4 + 5;

 } else if (this.pos_y > this.h - this.radius) {

 this.delta[1] = -(Math.random() % 4 + 5);

 }

 this.pos_x += this.delta[0];

 this.pos_y += this.delta[1];



 this.ctx.clearRect(0, 0, this.w, this.h);

 //绘制灰色的半透明蒙版

 this.ctx.fillStyle="rgba(125,125,125,0.9)"

 this.ctx.fillRect(0, 0, this.w, this.h);

 //保存状态

 this.ctx.save()

 //移动坐标

 this.ctx.translate(this.pos_x,this.pos_y);

 //裁剪透明的圆形区域

 this.ctx.globalCompositeOperation = "xor"; 

 this.ctx.fillStyle="white"

 this.ctx.beginPath();

 this.ctx.arc(0 ,0,this.radius,0,Math.PI*2,true);

 this.ctx.fill(); 

 // 将图片画到蒙版的下面，即只露出透明区域

 this.ctx.globalCompositeOperation = "destination-over"; 

 this.ctx.drawImage(this.img, -this.pos_x, -this.pos_y,this.w, this.h);

 //恢复状态

 this.ctx.restore();

 }



 var cl=new Clip();

 cl.interval=null;

 

 function move(id){ 

 if(cl.interval)

 clearInterval(cl.interval)

 if(id==1){

 cl.ctx.clearRect(0, 0, 450, 300); 

 cl.interval=setInterval(function(){cl.draw1()},20);

 }

 else{

 cl.ctx.clearRect(0, 0, 450, 300); 

 cl.interval=setInterval(function(){cl.draw2()},20);

 }

 }



 function stop(){

 clearInterval(cl.interval)

 }

 

 var compositeTypes = [

 'source-over','source-in','source-out','source-atop',

 'destination-over','destination-in','destination-out','destination-atop',

 'lighter','darker','copy','xor'

 ];

 function drawComp(){

 for (i=0;i<compositeTypes.length;i++){

 var label = document.createTextNode(compositeTypes[i]);

 document.getElementById('lab'+i).appendChild(label);

 var ctx = document.getElementById('tut'+i).getContext('2d');



 // draw rectangle

 ctx.fillStyle = "#09f";

 ctx.fillRect(15,15,70,70);



 // set composite property

 ctx.globalCompositeOperation = compositeTypes[i];



 // draw circle

 ctx.fillStyle = "#f30";

 ctx.beginPath();

 ctx.arc(75,75,35,0,Math.PI*2,true);

 ctx.fill();

 }

 }

 drawComp();

</script>