javascript 颜色在 chrome 上不起作用

Question

为什么这段代码没有出现颜色

function doFirst(){
  var x= document.getElementById('canvas');
  canvas=x.getContext('2d');
  var g=canvas.createLinearGradient(0,0,100,100);
  g.addColorStop(.0,"blue");
  g.addColorStop(1,"red");
  canvas.fillstyle=g;
  canvas.fillRect(0,0,100,100);
}
window.addEventListener("load", doFirst, false);

Answer 1

您的代码中有拼写错误，应该是 canvas.fillStyle 而不是 canvas.fillstyle。

function doFirst(){
  var x = document.getElementById('canvas');
  canvas = x.getContext('2d');
  var g = canvas.createLinearGradient(0,0,100,100);
  g.addColorStop(.0,"blue");
  g.addColorStop(1,"red");
  canvas.fillStyle = g;
  canvas.fillRect(0,0,100,100);
}

window.addEventListener("load", doFirst, false);

<canvas id="canvas"></canvas>

希望这有帮助!