首页 > 其他 > 详细

canvas - 变换

时间:2017-06-04 14:24:02      阅读:311      评论:0      收藏:0      [点我收藏+]

  变换方法 *5

 

translate(x,y)  重新映射画布上的(0,0)

rotate(deg)    deg  - degree * Math.PI / 180

scale(scaleWidth,scaleHeight)

transform(a,b,c,d,e,f) // 水平缩放绘图  水平倾斜绘图 垂直倾斜绘图 垂直缩放绘图 水平移动绘图 垂直移动绘图

setTransform

 

ctx.strokeStyle = "#f89";
ctx.fillStyle = "#f89";
ctx.shadowColor = "#e10";
ctx.shadowOffsetX = ctx.shadowOffsetY =  6;
ctx.lineWidth = 5;

ctx.translate(200,200)    
for (var i =12;i--;){
    ctx.rotate(30*Math.PI/180);
    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.stroke();
}


ctx.rect(50,300,100,100);
ctx.stroke()




undefined
ctx.transform(1,0.5,-0.5,1,300,10);
ctx.fillRect(0,0,250,100);

 

技术分享

canvas - 变换

原文:http://www.cnblogs.com/Tachi/p/6940224.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!