多個實例：JavaScript的

Question

我使用這種方式..

var canvas = document.getElementById("canvas"); 
    var contextGrayLine= canvas.getContext("2d"); 
    var contextRedLine= canvas.getContext("2d"); 

    contextGrayLine.lineWidth = 50; 
    contextRedLine.lineWidth = 20; 
    contextGrayLine.beginPath(); 

    contextGrayLine.moveTo(10,10); 
    contextGrayLine.lineTo(500,10) 

    contextGrayLine.strokeStyle = "#AAA"; 
    contextGrayLine.stroke(); 

我創建了帆布的兩個實例，但redLine.lineWidth在寫grayLine.lineWidth值......爲什麼會這樣???

Answer 1

因爲contextGrayLine和contextRedLine都指向相同的上下文對象。您需要獨立繪製兩條樣式的路徑，例如

var ctx = canvas.getContext('2d'); 

ctx.lineWidth = 50; 
ctx.strokeStyle = '#aaaaaa'; 
ctx.beginPath(); 
ctx.moveTo(10, 10); 
ctx.lineTo(500, 10); 
ctx.stroke(); 

ctx.lineWidth = 20; 
ctx.strokeStyle = '#ff0000'; 
...