canvas绘图

canvas

1、canvas元素

canvas只有两个标签可以使用，一个是width，一个是height，如果不给canvas设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。建议永远不要使用css属性来设置canvas的宽高。
支持canvas的浏览器会只渲染canvas标签，而忽略其中的替代内容。不支持 canvas 的浏览器则 会直接渲染替代内容。所以，在我们使用canvas标签时该这样使用：

2、JS的应用

1、画布的渲染(2d)
在创建了画布后，当我们使用画布的时候需要先声明一个2d的画布渲染
例：
当声明了画布的渲染后，就可以进行我们的操作了

1)坐标系
绘制X轴

绘制Y轴

效果图：

2)矩形
canvas三种方法绘制矩形：

1、 绘制一个填充的矩形
fillRect(x, y, width, height)
2、绘制一个矩形的边框
strokeRect(x, y, width, height)
3、 清除指定的矩形区域，然后这块区域会变的完全透明。
clearRect(x, y, widh, height)
注意：
​ 这3个方法具有相同的参数。
​ x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
​ width, height：指的是绘制的矩形的宽和高。

3)path
绘制的步骤：
1、创建路径起始点
2、调用绘制方法去绘制出路径
3、把路径封闭
4、 一旦路径生成，通过描边或填充路径区域来渲染图形。
方法：
1、新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
beginPath()
2、把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
moveTo(x, y)
3、闭合路径之后，图形绘制命令又重新指向到上下文中
closePath()
4、通过线条来绘制图形轮廓
stroke()
5、通过填充路径的内容区域生成实心的图形
fill()
4)绘制线段

5)绘制三角形


填充三角形


6)绘制圆弧
arc(x, y, r, startAngle, endAngle, anticlockwise):
以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)


7)绘制曲线