HTML5用哪个方法绘制

canvas绘图通过属于 canvas 的 JavaScript 方法完成

针对不支持html5的IE浏览器

提示：canvas的绘图过程（即填充与描边）是非常消耗资源的，如果想节省系统资源提高效率，最好是绘制好所有路径，再一次性填充或描边图形。 

canvas 方法

方法

用途

getContext(contextId)    公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。    

height    设置 canvas 的高度。默认值是 150 像素。    

width    设置 canvas 的宽度。默认值是 300 像素。    

createLinearGradient(x1,y1,x2,y2)    创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。    

createRadialGradient(x1,y1,r1,x2,y2,r2)    创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。    

addColorStop(offset, color)    向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。    

fillStyle    设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.    

strokeStyle    设置用于绘制一根直线的颜色 — 例如，strokeStyle='rgb(255,0,0)'.    

fillRect(x,y,w,h)    填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。    

strokeRect(x,y,w,h)    绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。    

moveTo(x,y)    将绘图位置移动到坐标 x,y。    

lineTo(x,y)    从绘图方法结束的最后位置到 x,y 绘制一条直线。    

1、绘制矩形：用到fillRect

2、线性渐变，用到createLinearGradient

3、放射性渐变，用到createRadialGradient

4、绘制矩形，与填充的不同，这个是描边效果

(当宽度为1px时，很明显的出现了模糊的现象，解决方法是数值都加上0.5，具体原因就自己百度下吧)

5、渐变笔触

6、绘制圆，圆周长公式=2∏r

7、绘制圆形

8、绘制直线

9、绘制曲线