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():可以为整个画布里图像填充同一种颜色