基礎
準備畫布
<canvas width="600" height="400"></canvas>
準備繪制工具
// 準備繪圖工具
var myCanvas = document.querySelector('canvas')
var ctx = myCanvas.getContext('2d')//繪制3d的視乎使用web gl
使用工具繪圖
ctx.moveTo(50,50)
ctx.lineTo(100,100)
ctx.stroke();
樣式
由于畫線的中心對應于一個像素點的刻度朴下，即一條線占用了兩個像素各一半及穗，因此畫圖默認樣式顯示為灰色，2px；可以通過將位置上移或者下移0.5px框杜；
strokeStyle
設置描邊的線條的顏色双炕，該屬性會對上面的設置進行覆蓋，可通過繪制工具的beginPath()來開啟新路徑
lineWidth
設置線條的寬度
lineCap
設置線條是圓角或者方形汁汗，取值butt(默認) square round
fillStyle
lineJoin
設置兩條線條相交點樣式衷畦，取值miter、round知牌、bevel
setLineDash()
設置線條為虛線樣式祈争，接受參數(shù)為數(shù)組，可以設置虛線和實線長度角寸，如[5]：虛實都是5菩混；[5,10]：實為5，虛為10扁藕；[5,10,15]：實虛實
getLineDash()
獲取不重復的一段虛線樣式數(shù)據(jù)
lineDashOffset
設置虛線偏移沮峡，如果是正值向右偏移，否則向左偏移
圖形填充問題
非零環(huán)繞規(guī)則
- 可以解決一個圖形或者多個圖形相交時區(qū)域的填充問題亿柑；
- 查看一個區(qū)域是否填充邢疙，從該區(qū)域做一條射線，數(shù)與該直線相交的軌跡數(shù)望薄，如果軌跡是順時針軌跡則加1疟游，否則減1
- 計算最后的結(jié)果，如果為0則該區(qū)域不填充痕支，否則進行填充颁虐；
注意點
- canvas標簽的寬高應該通過canvas屬性進行初始化，在canvas屬性中的設置是畫布的寬高卧须，在css中設置的樣式設置的是 canvas盒子的寬高
案例
案例一
var myCanvas = document.querySelector('canvas')
var ctx = myCanvas.getContext('2d')
ctx.beginPath() //開啟新的路徑
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.strokeStyle = 'blue'
ctx.stroke()
ctx.beginPath() //開啟新的路徑
ctx.moveTo(100, 200)
ctx.lineTo(300, 200)
ctx.strokeStyle = 'red'
ctx.lineWidth = 3
ctx.stroke()
ctx.beginPath() //開啟新的路徑
ctx.moveTo(100, 300)
ctx.lineTo(300, 300)
ctx.strokeStyle = '#282C34'
ctx.lineWidth = 10
ctx.stroke()
案例二
//繪制三角形
// var canvasObj = document.querySelector('canvas')
// var ctx = canvasObj.getContext('2d')
// ctx.moveTo(100,100)
// ctx.lineTo(200,100)
// ctx.lineTo(200,200)
// ctx.closePath()//關(guān)閉路徑
// ctx.lineWidth=10
// ctx.stroke()
//繪制正方形
var canvasObj = document.querySelector('canvas')
var ctx = canvasObj.getContext('2d')
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineTo(300, 300)
ctx.lineTo(100, 300)
ctx.closePath()
ctx.moveTo(150, 150)
ctx.lineTo(150, 250)
ctx.lineTo(250, 250)
ctx.lineTo(250, 150)
ctx.closePath()
ctx.stroke()
ctx.fill()
