通过HTML5 canvas标签，结合JavaScript API来绘制比较常见的图片，如三角形、矩形、线、圆形或圆环等形状，本文将分享canvas中给出的JavaScript属性和方法，了解这些API，能够助你快速上手canvas的绘制。
描述
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） – 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
像素操作
| 属性 |
描述 |
| width |
返回 ImageData 对象的宽度 |
| height |
返回 ImageData 对象的高度 |
| data |
返回一个对象，其包含指定的 ImageData 对象的图像数据 |
其他
| 方法 |
描述 |
| save() |
保存当前环境的状态 |
| restore() |
返回之前保存过的路径状态和属性 |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
常用的API
var bg = document.getElementById('bg');
var ctx = bg.getContext('2d');
ctx.beginPath();开始绘制一个新的路径
ctx.moveTo(x,y) ： 将当前点移动到点(x,y)。
ctx.lineTo(x,y) ： 从当前点绘制一条直线到点(x,y)。
ctx.arc(x,y,r,sAngle,eAngle,counterclockwise) ： 绘制一个圆心为(x,y),半径为r，弧度为(sAngle,eAngle),是否为逆时针开始的形状，（一般为圆或圆弧）。
ctx.rect(x,y,width,height);矩形的左上角为(x,y),宽为width,高为height
ctx.fillStyle = 'red'; //填充的颜色
ctx.fill() ： 填充形状。
ctx.stroke() ：绘制空心形状
ctx.closePath() ： 通过绘制一条当前点到路径起点的线段来闭合形状。
在接下来的文章中，我将分享一些常见图片的如三角形、矩形、圆环的填充和空心绘制。欢迎收藏关注
关注我
我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。
-
回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
-
回复「Vue脑图」获取 Vue 相关脑图
-
回复「思维图」获取 JavaScript 相关思维图
-
回复「简历」获取简历制作建议
-
回复「简历模板」获取精选的简历模板
-
回复「加群」进入500人前端精英群
-
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
-
回复「知识点」下载高清JavaScript知识点图谱
每日分享有用的前端开发知识，加我微信:caibaojian89 交流