HTML5绘图笔记4：操作图形

保存和恢复canvas状态

save()存当前环境的状态

restore()返回之前保存过的路径状态和属性

<canvas id="myCanvas" width="400" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 开始绘制矩形。
context.fillStyle="#ff00ff";
context.strokeStyle="blue";
context.fillRect(20,20,100,100);
context.strokeRect(20,20,100,100);
context.fill();
context.stroke();
// 保存当前canvas状态。
context.save();
//绘制另外一个矩形。    
context.fillStyle="#ff0000";
context.strokeStyle="green";
context.fillRect(140,20,100,100);
context.strokeRect(140,20,100,100);
context.fill();
context.stroke();
// 恢复第一个矩形的状态。
context.restore();
// 绘制两个矩形。
context.fillRect(20,140,50,50);
context.strokeRect(80,140,50,50);
</script>

清除绘图

<script type="text/javascript">
function clearMap(){
    context.clearRect(0,0,300,200);
}
</script>

<canvas id="myCanvas" style="border:1px solid;" width="300" height="200"></canvas><br>
<input name="" type="button"  value="清空画布" onClick="clearMap();">
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="#FF00FF";
context.beginPath();
context.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true);
context.stroke();
</script>

移动坐标

canvas的坐标系统

Canvas API使用二维坐标系统，画布的左上角对应于坐标原点（0,0），向右和向下分别为X轴和Y轴，X轴向右为正，Y轴向下为正，以一个像素为一个坐标单位进行绘制。

坐标变换

绘制图形时，如果需要旋转图形，或者对图形进行变形处理，使用Canvas API的坐标变换就可以实现这些效果。对坐标的变换处理有平移、缩放和旋转3种方式。

1. 平移

Canvas API的translate()实现平移，方法定义如下：

ctx.translate(x,y);

2. 缩放

Canvas API的scale()方法可以实现缩小或放大，方法定义如下：

ctx.scale(x,y);

3. 旋转

Canvas API的的rotate()方法可以旋转图形，方法定义如下：

ctx.rotate(angle);

使用路径绘制图形的坐标变换

使用坐标变换方法对矩形这样的基本形状的做变形处理比较方便。解决问题的办法是，先写一个创建路径的函数，然后在坐标变换时调用该函数。

例子

<script type="text/javascript">
function drawTop(ctx, fillStyle){ 
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(0, 0, 30, 0,Math.PI,true);
    ctx.closePath();
    ctx.fill();
} 
function drawGrip(ctx){ 
    ctx.save(); 
    ctx.fillStyle = "blue";
    ctx.fillRect(-1.5, 0, 1.5, 40);
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(-5, 40, 4, Math.PI,Math.PI*2,true);
    ctx.stroke();
    ctx.closePath();
    ctx.restore(); 
} 
</script>

<canvas id="myCanvas" width="700" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
// 注意：所有的移动都是基于这一上下文。
ctx.translate(80,80);
for (var i=1;i<10;i++){
 ctx.save();
 ctx.translate(60*i, 0);
 drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
 drawGrip(ctx);
 ctx.restore();
}
</script>

旋转坐标

<script type="text/javascript">
function drawTop(ctx, fillStyle){
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(0,0,30,0,Math.PI,true);
    ctx.closePath();
    ctx.fill();
}
function drawGrip(ctx){
    ctx.save(); 
    ctx.fillStyle = "blue";
    ctx.fillRect(-1.5, 0, 1.5, 40);
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(-5, 40, 4, Math.PI,Math.PI*2,true);
    ctx.stroke();
    ctx.closePath();
    ctx.restore(); 
}
</script>

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(150,150);
for (var i=1;i<9;i++){
 ctx.save();
 ctx.rotate(Math.PI*(2/4+i/4));
 ctx.translate(0,-100);
 drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
 drawGrip(ctx);
 ctx.restore();
}
</script>

缩放图形

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(200,20);
for (var i=1;i<80;i++){
 ctx.save();
 ctx.translate(30,30);
 ctx.scale(0.95,0.95);
 ctx.rotate(Math.PI/12);
 ctx.beginPath();
 ctx.fillStyle="red";
 ctx.globalAlpha="0.4";
 ctx.arc(0,0,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
}
</script>

变换矩阵

矩阵变换可以实现比坐标变换更加复杂的图形变换。

使用transform()方法实现图形变换

使用绘图上下文对象的transform()方法修改变换矩阵，定义如下。

ctx.transform(a,b,c,d,dx,dy)

参数说明：

• a，b，c，d参数用来指定如何变形

• dx，dy参数用来移动坐标原点。

• a和d分别表示水平旋转（缩放）和垂直旋转或（缩放）的倍数值，默认为1;

• b和c分别表示水平倾斜和垂直倾斜的量，取值从-1到1;

• dx和dy表示将坐标原点水平方向和垂直方向位移的距离，单位默认为像素。

使用setTransform()方法实现图形变换

setTransform()方法用来重置变换矩阵。该方法的定义如下。

context.setTransform (a,b,c,d,x,y)

例子

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(200,20);
for (var i=1;i<90;i++){
 ctx.save();
 ctx.transform(0.95,0,0,0.95,30,30);
 ctx.rotate(Math.PI/12);
 ctx.beginPath();
 ctx.fillStyle="red";
 ctx.globalAlpha="0.4";
 ctx.arc(0,0,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
}
ctx.setTransform(1,0,0,1,10,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,50,50);
ctx.fill();
</script>

组合图形

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="red";
context.fillRect(50,25,100,100);
context.fillStyle="green";
context.globalCompositeOperation="source-over";
context.beginPath();
context.arc(150,125,50,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="red";
context.fillRect(50,25,100,100);
context.fillStyle="green";
context.globalCompositeOperation="source-over";
context.globalAlpha=0.5;
context.beginPath();
context.arc(150,125,50,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>

裁切路径

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
// 绘制背景。
ctx.fillStyle="black";
ctx.fillRect(0,0,300,300);
ctx.fill();
// 绘制圆形。
ctx.beginPath();
ctx.arc(150,150,130,0,Math.PI*2,true);
// 裁切路径。
ctx.clip();
ctx.translate(200,20);
for (var i=1;i<90;i++){
 ctx.save();
 ctx.transform(0.95,0,0,0.95,30,30);
 ctx.rotate(Math.PI/12);
 ctx.beginPath();
 ctx.fillStyle="red";
 ctx.globalAlpha="0.4";
 ctx.arc(0,0,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
   }
</script>