canvas
HTML
<canvas id="myCanvas" width="200" height="200"/>
JS
//获取dom
let myCanvas = document.getElementById('myCanvas')
//获取画笔
let ctx = myCanvas.getContext('2d')
直线绘制
- lineWidth:线的宽度,strokeStyle='10px',宽度设置为10px
- strokeStyle:描边样式,strokeStyle='pink',描边设置为粉色
- beginPath:开始绘制
- closePath:结束绘制,这样才能重新定义新的起点绘制
- moveTo:直线绘制的起点
- lineTo:绘制点,lineTo(x,y)x和Y为点的平面坐标
- stroke:开始绘制
圆形绘制
- arc:绘制圆弧或者圆，使用的方法是：arc(x, y, radius, startAngle, endAngle, anticlockwise)。x和Y为圆心的坐标，radius为半径，startAngle为圆弧或圆的开始位置，endAngle为圆弧或圆的结束位置，anticlockwise是绘制的方向（不写默认为false，从顺时针方向）。
矩形绘制
- strokeRect:strokeRect(x,y,width,height),x,y表示绘制开始的点,width,height表示长度和宽度。
- fillRect:fillRect(x,y,width,height)填充矩形,参数和strokeRect一致
- clearRect:clearRect(x,y,width,height)清除矩形,参数和strokeRect一致
椭圆绘制
ellipse:ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
- x、y：椭圆的圆心位置
- radiusX、radiusY：x轴和y轴的半径
- rotation：椭圆的旋转角度，以弧度表示
- startAngle：开始绘制点
- endAngle：结束绘制点
- anticlockwise：绘制的方向（默认顺时针），可选参数。
