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