HTML5畫布繪製多彩線

我想畫兩條平行線在畫布上，但它似乎像後者的屬性覆蓋前者。請提示可能出現的問題：HTML5畫布繪製多彩線

<html> 
<head> 
<script type="application/javascript"> 
    function draw() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    // draw a 10 pix green line 
    ctx.strokeStyle='#00cc00'; 
    ctx.lineWidth=10; 
    ctx.moveTo(100,0); 
    ctx.lineTo(100,1000); 
    ctx.stroke(); 
    // draw a 20 pix red line 
    ctx.strokeStyle='#cc0000'; 
    ctx.lineWidth=20; 
    ctx.moveTo(140,0); 
    ctx.lineTo(140,1000); 
    ctx.stroke(); 
    } 
    </script> 
    </head> 
    <body onload="draw()"> 
    <div><canvas id="canvas" width="1000" height="1000"></canvas></div> 
    </body> 
    </html>

來源

2010-08-29 Amarsh

在繪製每一行之前請致電ctx.beginPath。調用強stroke時，第一行仍然是當前路徑的一部分，因此它會以新顏色再次繪製。

來源

2010-08-29 12:11:23

謝謝它的作品 – Amarsh 2010-08-29 12:29:19

HTML5畫布繪製多彩線

回答

相關問題