Canvas基本用法

canvas标签中间是显示若浏览器不支持时显示的内容

<canvas>浏览器不支持canvas，请升级你的浏览器</canvas>

1. 渲染上下文，这次主要以2D渲染上下文

<canvas id='s'></canvas>

const canvas = document.getElementById('s')
const ctx = canvas.getContext('2d')

2. 绘制矩形 canvas只支持一种原生的图形绘制：矩形，所有其他的图形都需要生成一种路径（path），canvas支持矩形绘制的方法有三种

• fillRect(x,y,width,height) 绘制一个填充的矩形
• strokeRect(x,y,width,height) 绘制一个矩形的边框
• clearRect(x,y,width,height)清除指定的矩形区域，然后这块区域会变得完全透明

3. 绘制路径

• beginPath() 新建一条路径
• moveTo(x,y) 把画笔移动到指定的坐标(x,y)，相当于设置路径的起点坐标
• closePath() 闭合路径之后，图形绘制命令又重新指向上下文中
• stroke() 通过线条来绘制图形轮廓
• fill() 通过填充路径内容区域生成实心的图形

4. 绘制圆弧

• arc(x,y,r,startAngle,endAngle,anticlockwise),其中以(x,y)为圆心，r为半径，从startAngle弧度开始到endAngle弧度结束，anticlockwise是布尔值，要是true就是逆时针，false就是顺时针Math.PI是180度
• arcTo(x1,y1,x2,y2,radius)根据给定的控制点和半径画一段圆弧，最后在以直线连接两个控制点

5. 添加样式

• fillStyle = color 填充颜色
• strokeStyle = color 设置图形轮廓的颜色，注意：一旦给某个图形设置了不同的颜色，那么这个颜色就会默认成为下面绘制的图形的默认颜色，如果想改变颜色请重新设置
• lineWidth 可以设置线宽
• lineCap = type type可以设置为butt（以方形结束）round（以圆形结束）square（以方形结束，但是末端增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域）