canvas的坑真是太大了，w3school上也只是一些簡單的例子，還得自己好好研究下。剛學到beginpath()，意思是開始畫一條線。
來段代碼
<html> <head> <title>canvas</title> </head> <canvas id=myCanvas width=500px height=500px></canvas> <script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.fillStyle = "#000"; context.fillRect(0,0,500,500); context.beginPath(); context.moveTo(100,100); context.lineTo(200,100); context.strokeStyle = "red"; context.stroke(); context.beginPath(); context.moveTo(100,200); context.lineTo(200,200); context.strokeStyle = "blue"; context.stroke(); context.beginPath(); context.moveTo(100,300); context.lineTo(200,300); context.strokeStyle = "yellow"; context.stroke(); </script> </html>
在不修改代碼的前提下，顯示的樣式是會出現紅、藍、黃、三條線
接下來我們注釋第2個stroke()，發現第2根藍線消失了，僅僅顯示紅線和黃線。stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。
當我們把3個beginPath() 注釋起來，神奇的事情就發生了：依次出現了橙、綠、黃三條線。情況貌似是在沒有beginPath()的情況下，stroke會疊加執行，即：第一個stroke會畫一條紅線；第二個stroke會畫兩條藍線，第三個stroke會畫三條黃線，那么對應的上面橙色線條就是紅藍黃的疊加色，中間綠色就是紅和藍的疊加色，最后的黃色，就是黃色。