标签插入
<canvas id="canvas"></canvas>
获取标签
var canvas = document.getElementById('canvas');
获取context,全文使用context绘制
var context = canvas.getContext('2d')
绘制线段
context.moveTo(0,0);context.lineTo(100,100);
常用属性、
moveTo(0,0) 起点坐标
lineTo(100,100) 下一个点坐标,可多次使用,可与起点连接,构成各种形状的图形
lineWidth = 5 线段宽度
strokeStyle = '#005588' 线段背景
context.stroke() 绘制
fillStyle = 'rgb(2,100,30)' 图形填充背景
context.fill() 背景填充
context.beginPath() 开始一段路径
context.closePath() 结束一段路径,让绘制状态之间互不影响,如果区域未闭合,使用线段闭合
绘制弧形
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false)
startingAngle,endingAngle 值为0,0.5,1,1.5
anticlockwise 绘制方向为逆时针/顺时针
对于闭合图形的重绘API
context.clearRect(参数)```