canvas学习笔记 | 张先生的网络日志

1.canvas属性值里的宽度和高度为canvas的实际尺寸，样式中声明的尺寸为显示尺寸，下面的例子中canvas的实际尺寸为350*350，显示尺寸为500px*500px。

<canvas id="canvas" width="350" height="350" style="width:500px;height:500px;">
</canvas>

1 2	<canvas id="canvas" width="350" height="350" style="width:500px;height:500px;"> </canvas>

2.在canvas中绘图的基本步骤：移动原点-绘制路径-填充路径：

var can = document.getElementById('canvas');
var ctx=can.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="red";
ctx.moveTo(10,10); //移动原点至(0,0)
ctx.lineTo(20,20) ;//从原点描绘路径至(20,20)
ctx.stroke(); //用线条填充路径
ctx.closePath(); //结束绘制

var can = document.getElementById('canvas');

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

ctx.beginPath();

ctx.strokeStyle="red";

ctx.moveTo(10,10); //移动原点至(0,0)

ctx.lineTo(20,20) ;//从原点描绘路径至(20,20)

ctx.stroke(); //用线条填充路径

ctx.closePath(); //结束绘制

3.在canvas里绘制新的图形时，旧的图形会被清除，为了保留旧图形，每次绘制前需要使用beginPath()开始新绘制，使用close.Path()结束绘制。

var can = document.getElementById('canvas');
var ctx=can.getContext("2d");
ctx.fillStyle="red";
ctx.beginPath();//开始绘制
ctx.fillRect(0,0,20,10);//绘制矩形
ctx.closePath();//结束绘制

var can = document.getElementById('canvas');

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

ctx.fillStyle="red";

ctx.beginPath();//开始绘制

ctx.fillRect(0,0,20,10);//绘制矩形

ctx.closePath();//结束绘制

4.修改canvas大小时，canvas的内容会被清除，需要重新绘制图形，下面的例子可以将canvas等比例缩放至指定宽度。

function CanvasScale(n){
    n = n/canvas.width;
    can.width=canvas.width*n;
    can.height=canvas.height*n;
    ctx.scale(n,n);
}
CanvasScale("300"); // 将canvas等比比例缩放至宽度300