Canvas小结（canvas-转换） Canvas小结（canvas-转换）

scale() 方法缩放当前绘图，更大或更小。
文章图片
scale()

var c = document.getElementById('mycanvas'); var ctx = c.getContext('2d'); ctx.strokeRect(5,5,25,15); //context.scale(scalewidth,scaleheight); 1=100%, 0.5=50%, 2=200%, 依次类推 ctx.scale(2,2); ctx.strokeRect(5,5,25,15); ctx.scale(2,2); ctx.strokeRect(5,5,25,15); ctx.scale(2,2);

retate()方法旋转当前的绘图

文章图片
retate()

var c2 = document.getElementById('mycanvas2'); var ctx2 = c2.getContext('2d'); //context.rotate(angle); /* 旋转角度，以弧度计。如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。 */ ctx2.rotate(20*Math.PI/180); ctx2.fillRect(20,20,150,100);

translate()方法重新映射画布上的(0,0)位置

文章图片
translate()

var c3 = document.getElementById('mycanvas3'); var ctx3 = c3.getContext('2d'); ctx3.fillRect(10,10,50,30); ctx3.translate(70,70); ctx3.fillRect(10,10,100,50);

transform()方法替换当前的变换矩阵

文章图片
transform()

var c4 = document.getElementById('mycanvas4'); var ctx4 = c4.getContext('2d'); ctx4.fillStyle = 'yellow'; ctx4.fillRect(0,0,250,120); ctx4.transform(1,0.5,-0.5,1,30,10); ctx4.fillStyle = 'red'; ctx4.fillRect(0,0,250,120); ctx4.transform(1,0.5,-0.5,1,30,10); ctx4.fillStyle = '#00f'; ctx4.fillRect(0,0,250,120);