canvas - 变换

最新推荐文章于 2024-05-24 09:31:34 发布

as250555

最新推荐文章于 2024-05-24 09:31:34 发布

阅读量69

点赞数

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

版权

　　变换方法 *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);