Canvas的语法及基本用法

canvas 可直接在网页上绘制图形。

建立画布


1
<canvas id="myCanvas" width="400" height="400"></canvas>



canvas 要用于文档全部加载之后绘制，所以要放在 window.onload = function( ){ } 中。

要获取 Canvas 中的 2D 环境，只需要通过 canvas 的 getContext() 方法即可，给这个方法传入一个 2d 的值。并且将这个环境赋予给一个变量。

例如：var ctx = canvas.getContext(‘2d’);

坐标系统


Web的坐标系统的原点是在屏幕（浏览器屏幕）的左上角。

同样的它有两个坐标轴，x轴（水平轴）和y轴（垂直轴）。两轴的交汇点（左上角）为坐标原点 (0,0) 。原点沿 x轴 向右是正值，原点沿 y轴 向下是正值。

常见绘制函数

moveTo(x,y)：移动画笔到指定的坐标点 (x,y) ，该点就是新的子路径的起始点。该方法并不会从当前路径中清除任何子路径。

lineTo(x,y)：使用直线连接当前端点和指定的坐标点(x,y)。

stroke()：沿着绘制路径的坐标点顺序绘制直线。

fill()：填充闭合图形。

lineWidth 来改变绘制线段的粗细,默认值是 1.0 ，并且这个属性必须大于 0.0 。 (跟宽高一样，也没有单位)

fillStyle 来改变填充样式。

strokeStyle 来改变线段的颜色，该属性的值可以是一个表示 CSS颜色值 的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个 CanvasGradient 对象 或者 CanvasPattern 对象。

CanvasGradient 接口表示描述渐变的 不透明对象 。

1
2
3
4
5
6
7
8
9
10
11
12
13
function drawScreen () { 
// 创建一个表示线性颜色渐变的CanvasGradient对象， 
// 并设置该对象的作用区域就是线段所在的区域 
	var canvasGradient = ctx.createLinearGradient(50, 50, 250, 50);  //在offset为0的位置(即起点位置)添加一个蓝色的渐变
	canvasGradient.addColorStop(0, "blue");  //在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变 
	canvasGradient.addColorStop(0.2, "green");  //在offset为0的位置(即终点位置)添加一个红色的渐变 
	canvasGradient.addColorStop(1, "red");  //将strokeStyle的属性值设为该CanvasGradient对象 
	ctx.strokeStyle = canvasGradient; 
	ctx.lineWidth = 10; 
	ctx.moveTo(50, 10); 
	ctx.lineTo(350, 100); 
	ctx.stroke(); 
}

beginPath()：开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。

closePath()：如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线边接当前端点与起始端点来关闭路径，但如果图形已经关闭（比如先调用stroke()）或者只有一个点，它会什么都不做。

在Canvas中绘制路径，最好加上 beginPath() 和 closePath() 。

1
2
3
4
5
6
7
8
9
10
11
12
function drawScreen () { 
	ctx.strokeStyle = '#f36'; 
	ctx.lineWidth = 4; 
	ctx.beginPath(); 
	ctx.moveTo(50, 10); 
	ctx.lineTo(150, 10); 
	ctx.lineTo(150,200); 
	ctx.lineTo(200,200); 
	ctx.lineTo(200,150); 
	ctx.stroke(); 
	ctx.closePath(); 
}

特别提醒： 在绘制图形路径时，一定要先调用 beginPath() 。

beginPath() 方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例如上面示例的两条直线)

，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。

对于 closePath() 方法，初学者一定要稍加注意。在上面绘制折线的代码示例中，我们先调用了 stroke() ，再调用了 closePath() 。其实在调用 stroke()

方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用 closePath() 方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的 closePath()

是可有可无的，不过为了保持良好的习惯，还是建议写上)。如果我们交换一下 stroke() 和 closePath() 的调用顺序，则情况完全不一样了。由于 closePath()

先调用，此时绘制路径并没有关闭，那么 closePath() 将会用直线连接当前端点和起始端点。

像素线


如果在像素边界处绘制一条 1 像素宽的垂直线段，那么Canvas的绘图环境对象会试着将半个像素画在边界中线的右边，将另外半个像素画在边界中线的左边。

然而，在一个整像素的范围内绘制半个像素宽的线段是不可能的，所以左右两个方向上的半像素都被扩展为 1 个像素。

canvas绘制简单图形

fillRect(x, y, width, height)：绘制一个填充的矩形

strokeRect(x, y, width, height)：绘制一个矩形的边框

clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明

arc(x,y,r,startdeg,enddeg)：绘制圆 ( x, y 为圆心坐标, r 为圆弧半径 )