天天看點

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():可以為整個畫布裡圖像填充同一種顔色