canvas里方法的应用总结

canvas里方法的应用总结（1）

1.canvas在低版本版本浏览器是不兼容的，可以提示用户

2.canvas使用原生js操作

画一条直线步骤流程一般为：

开启画布

<canvas id="cont" width="500px" height="500px">您的浏览器版本过低，请升级浏览器或者使用chrome打开!</canvas>

获取画布

var canvas=document.querySelector('#cont')

获取画布的上下文

var ctx=canvas.getContext()

开启一条路径

ctx.beginPath()

确定起始点

ctx.moveTo(100,100)

确定结束点

ctx.lineTo(400，400)

着色

ctx.stroke()

关闭路径

ctx.closePath()

3.画矩形常用的方法有

fillRect(x,y,width,height):x,y是代表这个矩形左上角的坐标，width,height代表这个矩形的宽高

fillStyle:填充矩形整个图像颜色

在使用这两个方法时，先填充颜色，后创建矩形，否则颜色填充不上去

fill():可以为整个画布里图像填充同一种颜色

​ 4.清除画布某个地方：用clearRect()方法

​ 5.画圆用到的方法： arc(x,y,radius,startAngle,endAngle,counterclockwise)

​ arc(x,y,radius,startAngle,endAngle,counterclockwise)
​ x,y 描述弧的圆心坐标
​ radius 描述弧的圆型的半径
​ startAngle,endAngle
​ 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来测量
​ 沿着x轴正半轴的三点钟方向的角度为0,角度沿着逆时针的方向而增加
​ counterclockwise 弧沿着圆周的逆时针方向（true),还是顺时针方向(false)遍历