保存和恢复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种方式。
- 平移
Canvas API的translate()实现平移,方法定义如下:
ctx.translate(x,y);
- 缩放
Canvas API的scale()方法可以实现缩小或放大,方法定义如下:
ctx.scale(x,y);
- 旋转
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>