多个实例：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'; 
...