vue 使用原生canvas_GitHub - Mirror198829/vue-canvas: 基于vue使用canvas进行开发

介绍

不支持canvas的浏览器

绘图方法

路径

beginPath:开始绘制路径

moveTo:移动到绘制的新目标点

lineTo: 新的目标点

closePath:关闭路径，闭合，可以作为起止点闭合的连接

save

ctx.rect(100,100,100,100):绘制一个方块路径

ctx.save() //保存路径

//1st part

ctx.fillStyle = 'red' //after ctx.save() , this will not dirty 2nd part

ctx.beginPath()

ctx.moveTo(100,100)

ctx.lineTo(200,200)

ctx.lineTo(300,100)

ctx.closePath()

ctx.fill()

ctx.restore() // 与save()呼应，恢复路径

//2nd part

ctx.beginPath()

ctx.moveTo(100,200)

ctx.lineTo(200,200)

ctx.lineTo(300,100)

ctx.closePath()

ctx.stroke()

绘制圆

arc(x,y,半径,起始弧度，结束弧度，旋转方向)

-x,y：起始位置

-弧度与角度的关系：弧度 = 角度*Math.PI/180

-旋转方向：顺时针(默认:false)、逆时针(true)

其他曲线