瞭解HTML5畫布元素

Question

我讀了大量有關保存/恢復畫布狀態的文檔，但仍然與下一個example混淆。

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 

    // save default state 
    ctx.save(); 

    // draw new arc with new settings 
    ctx.lineWidth = 2; 
    ctx.fillStyle = '#bfb'; 
    ctx.strokeStyle = '#999'; 
    ctx.beginPath(); 
    ctx.arc(50, 50, 10, 0, 2 * Math.PI); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
    // restore default state 
    ctx.restore(); 

    // save default state again 
    ctx.save(); 
    // draw line with new settings 
    ctx.lineWidth = 4; 
    ctx.strokeStyle = '#000'; 
    ctx.moveTo(50, 50); 
    ctx.lineTo(100, 100); 
    ctx.stroke(); 
    // restore default state 
    ctx.restore(); 

    // save default state third time 
    ctx.save(); 
    // draw round circle with new settings 
    ctx.beginPath(); 
    ctx.lineWidth = 2; 
    ctx.strokeStyle = '#999'; 
    ctx.arc(100, 100, 10, 0, 2 * Math.PI); 
    ctx.closePath(); 
    ctx.fillStyle = '#bfb'; 
    ctx.fill(); 
    ctx.stroke(); 
    // restore default state 
    ctx.restore(); 
} 

draw(); 

我的代碼註釋邏輯，但絕對不是預期的結果。第一個圓圈有一行設置。圈子應該有不同的風格。

Answer 1

我不擅長畫布，但有一些基本的學習我認爲 你開始繪製道路之前缺少ctx.beginPath();。

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 

    // save default state 
    ctx.save(); 

    // draw new arc with new settings 
    ctx.lineWidth = 2; 
    ctx.fillStyle = '#bfb'; 
    ctx.strokeStyle = '#999'; 
    ctx.beginPath(); 
    ctx.arc(50, 50, 10, 0, 2 * Math.PI); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
    // restore default state 
    ctx.restore(); 

    // save default state again 
    ctx.save(); 
    // draw line with new settings 
    ctx.beginPath(); 
    ctx.lineWidth = 4; 
    ctx.strokeStyle = '#000'; 
    ctx.moveTo(50, 50); 
    ctx.lineTo(100, 100); 
    ctx.stroke(); 
    // restore default state 
    ctx.restore(); 

    // save default state third time 
    ctx.save(); 
    // draw round circle with new settings 
    ctx.beginPath(); /* ** THIS is missing in your code ** */ 
    ctx.lineWidth = 2; 
    ctx.strokeStyle = '#999'; 
    ctx.arc(100, 100, 10, 0, 2 * Math.PI); 
    ctx.closePath(); 
    ctx.fillStyle = '#bfb'; 
    ctx.fill(); 
    ctx.stroke(); 
    // restore default state 
    ctx.restore(); 
} 

draw(); 

DEMO

SOURCE