1.缩放功能对比
ctx.strokeStyle = 'red'; ctx.strokeRect(5,5,50,50); ctx.scale(2,2); ctx.strokeRect(5,5,50,50); ctx.scale(2,2); ctx.strokeRect(5,5,50,50);
不管是CSS3还是Canvas，它们俩都能缩放，就像是一个小变身。在CSS3里，你能用scale(sx, sy)来操纵纵横比（两种大小）；但在Canvas里，你得用两个数字来分别指明高矮。还有就是，如果X、Y轴缩放一致，那在CSS3里简化下就能搞定，Canvas上可得分别告诉它们两组数值！
.box{
width:50px;
height:50px;
border:1px solid #000;
margin:20px;
}
.box:hover{
-webkit-transform:scale(2,2);
}
你知道吗？canvas里的缩小放大其实是从头开始的！但有点儿奇怪的是，它会把起点给偏了过去，结果就是图像虽然变瘦或胖了，但是它的边界也会被牵连进去。拿CSS3做对比的话，它就是围绕着那个焦点来缩小放大的，所以边界就不会跟着一起动。
.box:hover{
-webkit-transform:scale(2);
}
还有就是，如果就在Canvas里面要弄一个特殊状况，比如只关注一个不停放大缩小？那就是要用到clearRect()这个方法了。咱们每次要画新东西前都得先擦除以前画的，这样才能看得到新的，同时还能保持那个图形的大小变化。
canvas{ background:#fff; width:300px; height:300px; }
2.旋转功能对比
ctx.strokeStyle = 'red'; ctx.strokeRect(5,5,50,50);
旋转啥的，咱们CSS 3和Canvas这俩家伙都会。用CSS 3的话就是用 rotate(angle)把画儿转一圈，angle就是要转多少度啦；但要是Canvas的话，得给它弧度才行，不能直接给角度
亲，您的浏览器不支持canvas，换个浏览器试试吧！
来嗑瓜子哈~ CSS3里边旋转动来动去都是以元素的中心点当基点的哦；然而Canvas就不同了！它有个translate(x,y)魔法技能，能让你随心所欲地调整画布的起点，手艺活儿更酷炫！
var timer = null;
ctx.strokeStyle = 'red';
timer = setInterval(function(){
ctx.beginPath();
ctx.scale(1.5,1.5);
ctx.strokeRect(5,5,50,50);
ctx.closePath();
},500)
3.平移功能对比
CSS3和Canvas都能用translate属性和translate(x,y)方法来实现平移功能。不过它们的原理有点不同！在CSS3里，使用translate就是把元素围绕着自己的中心轴移动，但重心还是原来那个位置；好比你站在一辆车中间，手扶着车门往前走，车门其实没动。但是如果你是在Canvas里用这个方法，那就是要重新设定原点（也可以理解成是你站着的那辆车的新位置），然后再把手（也就是新的元素位置）移动过去。
因为这种差异，使用translate来平移的时候，就算先画好图再玩scale，在Canvas上也还是原来那样子，根本不变的坐标系统。但在CSS3里，元素一旦开始自己平移，就全变样！
var timer = null;
var num = 1;
ctx.strokeStyle = 'red';
timer = setInterval(function(){
if(parseInt(num) >=5){
clearInterval(timer);
num =5;
}else{
num +=0.1;
}
ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
ctx.save();
ctx.beginPath();
ctx.scale(num,num);
ctx.strokeRect(5,5,50,50);
ctx.closePath();
ctx.restore();
},500)
4.变换效果混用问题
别在上头乱用transform跟setTransform方法尤其是Canvas上面，很容易搞砸！这俩家伙儿都是只对执行后的画图动作有用，你再看看，一会儿换个形态，一会又换回来，太麻烦了。所以，，我们可以利用一下那个什么保存（save）和恢复（restore）的办法，这样就不用担心混用的问题。
.box{
width:50px;
height:50px;
border:1px solid #000;
margin:20px;
}
.box:hover{
-webkit-transform:rotate(30deg);
}
CSS3和Canvas其实都是有那些让人眼前一亮的特效的，不过它们毕竟还是有区别的。弄清楚这些不一样的地方，能帮你玩转这类新技能，做出更独特的效果！
ctx.fillStyle = 'red'; ctx.fillRect(0,0,150,50); ctx.beginPath(); ctx.rotate(30*Math.PI/180); ctx.strokeRect(0,0,150,50); ctx.closePath();
。
评论0