[Canvas学习]变形

Posted 2020-08-21 小碎石

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Canvas学习]变形相关的知识，希望对你有一定的参考价值。

学习目的：使用变形：移动，旋转，缩放栅格，创造出更强大的图形。

状态的保存与恢复Saving and restoring state

canvas的状态就是当前画面应用的所有样式和变形的一个快照，canvas的状态被存储在栈中，每当save方法被调用后，当前状态就会被推送到栈中保存。

状态信息包括：当前应用的变形； strokeStyle; fillStyle; globalAlpha; lineWidth; lineCap; lineJoin; miterLimit; shadowOffsetX; shadowOffsetY; shadowBlur; shadowColor; globalCompositeOperation; clipping path

save() 保存状态

restore() 恢复状态

每调用一次restore()方法后，上一个保存的状态就会从栈中弹出，所有设定都会被恢复。

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

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　ctx.fillRect(0,0,150,150);

　　ctx.save();

　　ctx.fillStyle = "#09f";

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

　　ctx.save();

　　ctx.fillStyle = "#fff";

　　ctx.globalAlpha = 0.5;

　　ctx.fillRect(30,30,90,90);

　　ctx.restore();

　　ctx.fillRect(45,45,60,60);

　　ctx.restore();

　　ctx.fillRect(60,60,30,30);

}

变形一：移动Translating

translate(x, y) 移动canvas和它的原点

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

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　ctx.fillRect(0,0,300,300);

　　for(var i=0; i<3; i++){

　　　　for(var j=0; j<3; j++){

　　　　　　ctx.save();

　　　　　　ctx.strokeStyle = "#9cff00";

　　　　　　ctx.translate(500+100*j, 50+100*i);

　　　　　　drawSpirograph(ctx, 20*(j+2)/(j+1), -8*(i+3)/(i+1), 10);

　　ctx.restore();

　　　　}

　　}

}

function drawSpirograph(ctx, R, r, m){

　　var x1 = R-m;

　　var y1 = 0;

　　var i = 1;

　　ctx.beginPath();

　　ctx.moveTo(x1, y1);

　　do{

　　if(i>20000) break;

　　var x2 = (R+r)*Math.cos(Math.PI/72*i)-(r+m)*Math.cos((R+r)/r*(Math.PI/72*i));

　　var y2 = (R+r)*Math.sin(Math.PI/72*i)-(r+m)*Math.sin((R+r)/r*(Math.PI/72*i));

　　ctx.lineTo(x2, y2);

　　x1 = x2;

　　y1 = y2;

　　i++;

}while( x2 != R-m && y2 != 0 );

　　ctx.stroke();

}

变形二：旋转Rotating

以原点为中心旋转canvas, 旋转中心点始终是canvas的原点，通过translate方法可以改变原点位置。

rotate(angle) 参数angle是旋转的角度，顺时针方向以弧度为单位值进行旋转

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

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　ctx.translate(75,75); //移动canvas的坐标原点到图案的正中心点

　　for(var i=1; i<6; i++){

　　　　ctx.save(); //每一圈都有自己的canvas状态

　　　　ctx.fillStyle = ‘rgb(‘ + (51*i) +‘,‘ + (255-51*i) + ‘, 255)‘; //每一圈的图案颜色是一致的

　　　　var m = i*6;

　　　　for(var j=0; j<m; j++){

　　　　　　ctx.rotate(Math.PI*2/m);

　　　　　　ctx.beginPath();

　　　　　　ctx.arc(0, 12.5*i, 5, 0, Math.PI*2, true);

　　　　　　ctx.fill();

　　　　}

　　}

}