<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画。
<canvas> 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOMproperties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。
替换内容
<canvas>元素与<img>标签的不同之处在于，就像<video>，<audio>，或者 <picture>元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。
我们只是在<canvas>标签中提供了替换内容。不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
渲染上下文
<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。
var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');
第一行，得到DOM对象，使用getContext()方法来访问绘画上下文。
检查支持性
替换内容是用于在不支持<canvas>标签的浏览器中展示的。通过简单的测试getContext()方法是否存在可以检查编程支持性。
var canvas = document.getElementById('id');
if(canvas.getContex){
var ctx = canvas.getContext('2d');
// drawing code here
}else{
//canvas-unsupported code here
}
绘制矩形
所有元素的位置都相对于原点定位。
canvas提供了三种方式绘制矩形。
fillRect(x,y,width,height) 绘制一个填充的矩形
strokeRect(x,y,width,height) 绘制一个矩形的边框
clearRect(x,y,width,height) 清除指定矩形区域，让清除部分完全透明
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。
绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
- 首先，需要创建路径起始点
- 使用画图命令去画出路径
- 把路径封闭
- 通过描边或填充路径区域来渲染图形
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形。
生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径构成图形。而每次这个方法调用之后，列表清空重置，然后就可以重新绘制新的图形。
第二步就是调用函数指定绘制路径。
第三步，闭合路径colsePath()，不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形已经闭合，该函数什么也不做。
注：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
moveTo(x,y)
将笔触移动到指定的坐标上。
当canvas初始化或者beginPath()调用后，你通常会使用movTo()函数设置起点。
lineTo(x,y)
绘制一条从当前位置到指定坐标的直线
arc(x,y,radius,startAngle,endAngle,anticlockwise)
画一个以(x,y)为圆心的以radius为半径的圆弧，从startAngle开始到endAngle结束(弧度=Math.PI/180*角度)，按照anticlockwise给定的方向（默认为false,顺时针）生成。
贝塞尔曲线
一般用来绘制复杂有规律的图形。
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
样式和颜色
colors
fillStyle = color
设置图形的填充颜色
strokeStyle = color
设置图形轮廓的颜色
透明度
通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。
globalAlpha = transparencyValue
有效值范围0.0到1.0. 默认为1.0
ctx.globalAlpha = 0.1;
Line styles
lineWidth = value 线条宽度
lineCap = type 线条末端样式
butt，round 和 square
默认的为 butt 。它是与辅助线齐平的。中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。右边的是 square 的效果，端点处加上了等宽且高度为一半线宽的方块。
lineJoin = type 线条与线条间接合处的样式
round, bevel 和 miter。默认是 miter
最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点。
miterLimit = value 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
就如上一个例子所见的应用 miter 的效果，线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大。miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。
getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments) 设置当前虚线样式
lineDashOffset = value 设置虚线样式的起始偏移量
网友评论