一、狀態(tài)的保存和恢復(fù)
在了解變形之前至扰，先介紹兩個(gè)在繪制復(fù)雜圖形時(shí)必不可少的方法。
save()restore()
save 和 restore 方法是用來(lái)保存和恢復(fù) canvas 狀態(tài)的，都沒(méi)有參數(shù)。
Canvas 的狀態(tài)就是當(dāng)前畫(huà)面應(yīng)用的所有樣式和變形的一個(gè)快照疹鳄。
Canvas狀態(tài)存儲(chǔ)在棧中，每當(dāng)save()方法被調(diào)用后芦岂，當(dāng)前的狀態(tài)就被推送到棧中保存瘪弓。
可以調(diào)用任意多次 save 方法。每一次調(diào)用 restore 方法禽最，上一個(gè)保存的狀態(tài)就從棧中彈出腺怯，所有設(shè)定都恢復(fù)。
用這個(gè)連續(xù)矩形的例子來(lái)描述 canvas 的狀態(tài)棧是如何工作的川无。
第一步是用默認(rèn)設(shè)置畫(huà)一個(gè)大四方形呛占，然后保存一下?tīng)顟B(tài)。
改變填充顏色畫(huà)第二個(gè)小一點(diǎn)的藍(lán)色四方形舀透，然后再保存一下?tīng)顟B(tài)栓票。
再次改變填充顏色繪制更小一點(diǎn)的半透明的白色四方形。
一旦我們調(diào)用 restore愕够，狀態(tài)棧中最后的狀態(tài)會(huì)彈出，并恢復(fù)所有設(shè)置佛猛。如果不是之前用 save 保存了狀態(tài)惑芭，那么我們就需要手動(dòng)改變?cè)O(shè)置來(lái)回到前一個(gè)狀態(tài)，這個(gè)對(duì)于兩三個(gè)屬性的時(shí)候還是適用的继找，一旦多了遂跟，我們的代碼將會(huì)猛漲。
當(dāng)?shù)诙握{(diào)用 restore 時(shí)婴渡，已經(jīng)恢復(fù)到最初的狀態(tài)幻锁，因此最后是再一次繪制出一個(gè)黑色的四方形。
示例：
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
ctx.fillRect(0,0,150,150); // 使用默認(rèn)設(shè)置繪制一個(gè)矩形
ctx.save(); // 保存默認(rèn)狀態(tài)
ctx.fillStyle = '#09F' // 在原有配置基礎(chǔ)上對(duì)顏色做改變
ctx.fillRect(15,15,120,120); // 使用新的設(shè)置繪制一個(gè)矩形
ctx.save(); // 保存當(dāng)前狀態(tài)
ctx.fillStyle = '#FFF' // 再次改變顏色配置
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90); // 使用新的配置繪制一個(gè)矩形
ctx.restore(); // 重新加載之前的顏色狀態(tài)
ctx.fillRect(45,45,60,60); // 使用上一次的配置繪制一個(gè)矩形
ctx.restore(); // 加載默認(rèn)顏色配置
ctx.fillRect(60,60,30,30); // 使用加載的配置繪制一個(gè)矩形
}
draw();
</script>
二边臼、變形
1哄尔、移動(dòng) Translating
translate 方法用來(lái)移動(dòng) canvas 和它的原點(diǎn)到一個(gè)不同的位置。
translate(x, y)
translate 方法接受兩個(gè)參數(shù)柠并。x 是左右偏移量岭接，y 是上下偏移量富拗，如圖所示。
示例1：
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.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(50 + j * 100, 50 + i * 100);
drawSpirograph(ctx, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
ctx.restore();
}
}
}
function drawSpirograph(ctx, R, r, O) {
var x1 = R - O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1, y1);
do {
if (i > 20000) break;
var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
ctx.lineTo(x2, y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R - O && y2 != 0);
ctx.stroke();
}
draw();
</script>
2鸣戴、旋轉(zhuǎn) Rotating
rotate 方法用于以原點(diǎn)為中心旋轉(zhuǎn) canvas啃沪。
rotate(angle)
這個(gè)方法只接受一個(gè)參數(shù)：旋轉(zhuǎn)的角度(angle)，它是順時(shí)針?lè)较虻恼曰《葹閱挝坏闹怠?/p>
示例2：
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
ctx.translate(75,75);
for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (var j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
}
draw();
</script>
3创千、縮放 Scaling
縮放用來(lái)增減圖形在 canvas 中的像素?cái)?shù)目，對(duì)形狀入偷，位圖進(jìn)行縮小或者放大追驴。
scale(x, y)
scale 方法接受兩個(gè)參數(shù)。x,y 分別是橫軸和縱軸的縮放因子盯串，它們都必須是正值氯檐。
值比 1.0 小表示縮小，比 1.0 大表示放大体捏，值為 1.0 時(shí)什么效果都沒(méi)有冠摄。
默認(rèn)情況下，canvas 的 1 單位就是 1 個(gè)像素几缭。舉例說(shuō)河泳，如果我們?cè)O(shè)置縮放因子是 0.5，1 個(gè)單位就變成對(duì)應(yīng) 0.5 個(gè)像素年栓，這樣繪制出來(lái)的形狀就會(huì)是原先的一半拆挥。同理，設(shè)置為 2.0 時(shí)某抓，1 個(gè)單位就對(duì)應(yīng)變成了 2 像素纸兔，繪制的結(jié)果就是圖形放大了 2 倍。
示例3：
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0,0,300,300);
// Uniform scaling
ctx.save()
ctx.translate(50,50);
drawSpirograph(ctx,22,6,5); // no scaling
ctx.translate(100,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
// Non-uniform scaling (y direction)
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50,150);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
// Non-uniform scaling (x direction)
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50,250);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(177.777,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.restore();
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
}
draw();
</script>
其它文章請(qǐng)?jiān)L問(wèn)：
