1、canvas 概述
画布<canvas>元素是 HTML5 中的新元素，可以通过JavaScript 在页面中指定的区域绘制图形
<canvas id="canvas" width="400px" height="500px">画布，你的浏览器不支持canvas，请更新浏览器</canvas>
canvas 需要设置 width 和 height 属性，如果没有设置这两个属性，width 和 height 有默认值（300，150）。如果通过style 设置 width 、height，则图形有可能会拉伸变形，参见该文章。
使用canvas的步骤：1、取得canvas元素对象 ；2、通过canvas 元素对象的 getContext("2d") 取得绘图2d上下文对象的引用；3、使用上下文的各种属性和方法来绘制图片。
2d上下文的坐标起始于 canvas 的左上角，原点坐标是 (0 , 0) 。
2、绘图上下文对象的属性和方法
fillStyle：该属性指定填充的样式（颜色，渐变，图像），值可以是字符串，渐变对象，模式对象，默认值是 “#000000”。如果是指定颜色的字符串，可以是任何CSS中指定颜色的格式
strokeStyle：该属性指定描边的样式，值可以是字符串，渐变对象，模式对象，默认值是 “#000000”。如果是指定颜色的字符串，可以是任何CSS中指定颜色的格式
fillRect( x, y, w, h)：填充一个矩形，并指定坐标 (x , y)，宽高 w 、h。其填充的颜色是通过 fillStyle 属性设置的
strokeRect( x, y, w, h)：绘制一个矩形，没有填充
clearRect( x, y, w, h)：将画布上的指定矩形区域清空，可以去掉之前绘制的图形
lineWidth：指定线条的宽度，可以是任何整数
lineCap：指定线条末端的形状，可以是 "butt"（平头），"round"（圆头），"square"（方头）
lineJoin：指定线条相交的方式，可以是 "round"（圆交），"bevel"（斜交），"miter"（斜接）
beginPath()：表示开始绘制路径，在绘制路径之前必须先调用该方法
arc( x, y, radius, startAngle, endAngle, counterclockwise)：以 (x , y) 为圆心绘制一条半径为 radius 的弧线，弧线的起始、截止角度分别是 startAngle，endAngle（角度是以弧度表示的），
counterclockwise表示是否按逆时针方向开始绘制（false是顺时针方向），角度的零弧度在x轴右侧
arcTo( x1, y1, x2, y2, radius)：绘制一条 半径为 radius 的弧线 穿过 (x1 , y1) ，(x2 , y2)两个点
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：绘制三次贝塞尔曲线，(c1x, c1y)，(c1x, c1y) 是控制点1，控制点2的 坐标，(x, y) 是终点的的坐标
quadraticCurveTo(c1x, c1y, x, y)：绘制二次贝塞尔曲线，(c1x, c1y)，控制点的 坐标，(x, y) 是终点的的坐标
moveTo(x , y)：把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
lineTo(x , y)：绘制直线，从上一点开始到点 (x , y)
rect( x, y, w, h)：绘制矩形路径，（不是独立的形状）
closePath()：闭合路径，绘制一条连接路径起点和终点的直线，闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()：通过线条来绘制图形轮廓
fill()：通过填充路径的内容区域生成实心的图形
clip()：可以在路径上创建一个剪切区域
原文：https://www.cnblogs.com/zhanglw456/p/10956651.html