注:canvas是根据状态进行绘制的
1.设置长宽
canvas作为标签,可以通过style设置样式,设置其长宽通常在style外直接使用width和height进行设置;也可以通过js进行设置,canvas.height和canvas.width
2.获取canvas元素
使用js可通过byid直接获取dom元素,如果使用jq,则获取的是jq元素,需要进行转化为dom元素,转化dom元素的方法是:jq获取的本身是一个数组,其0元素便是dom元素
3.绘制直线
(1)context先进行上下文环境的获取canvas.getContext("2d")
(2)context.moveTo(100,100)设置起点
(3)context.lineTo(200,200)设置直线终点
(4)context.stroke()进行绘制
(5)context.lineWidth设置线宽,context.strokeStyle设置线的颜色
4.绘制多边形
(1)添加多个lineTo达到首尾连接就可以就可以绘制任意的直多边形
(2)context.fillStyle=""设置多边形的填充颜色
(3)context.fill()进行填充
5.设置状态段
context.beginPath();
context.closePath();如果当前路径不封闭,使用此则自动封闭
6.绘制弧线和圆
context.arc(centerx,centery,radius,startAngle,endAngle,anticlockwise)