Question

我正在使用html5和javascript（我对这两者都一无所知）。我找到了一些html5的例子，复制了它，并开始尝试。这是一些代码。这个想法是当按下任何键时，两个方块开始向左移动（不会在它后面清理）。我不明白的是为什么我不能改变颜色（如下所示）。有任何想法吗？我显然做错了。

<!doctype html>

<!-- this source copied from  http://www.xanthir.com/blog/b48B0 -->

<canvas width=800 height=800>
</canvas>

<script>


var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext('2d');

var x = 230;
var y = 380;

// First, we'll paint the whole canvas black.
context.fillStyle = "black";
context.fillRect(0,0,800,800);

context.fillStyle = "red";
context.fillRect(0,0,30,30);

context.fillRect(0,100,30,30);

context.fillStyle = "green";
context.fillRect(0,200,30,30);


// Now we'll draw some shapes
// circle
context.fillStyle = "#06c";
context.strokeStyle = "white";
// These can be any CSS color.
context.lineWidth = 3;
context.beginPath();
context.moveTo(450,250);
context.arc(375,250,75,0,2*Math.PI,false)
context.closePath();
context.fill();
context.stroke();

// A triangle!  And a rainbow!
context.beginPath();
context.moveTo(150,50);
context.lineTo(90,150);
context.lineTo(210,150);
context.lineTo(150,50);
context.closePath();
var rainbow = context.createLinearGradient(150,50,150,150);
rainbow.addColorStop(.1,"red");
rainbow.addColorStop(.3,"orange");
rainbow.addColorStop(.5,"yellow");
rainbow.addColorStop(.7,"lime");
rainbow.addColorStop(.9,"blue");
context.fillStyle = rainbow;
context.fill();

// Some text!  And a shadow!
context.shadowOffsetX = -2;
context.shadowOffsetY = 2;
context.shadowColor = "#f88";
context.shadowBlur = .01;
context.fillStyle = "red";
context.font = "bold 72px monospace";
context.fillText("Foo Bar",30,400);

context.fillStyle = "blue";     
context.fillRect(0,300,30,30);

// ????????????  end of main. The current context now seems to remain (blue fillstyle  with some shadow )


// routine here : press any key to animate two new blocks over writing ----------------

document.onkeydown = function(e) {

context.fillstyle = "red";      // <-- ????????   this doesnt work (remains same   colour as last one in main )
context.fillRect(x,y,50,50);        // <-- ????????   draws a square in blue, not red

x = x - 5;

context.fillstyle = "white";        // <-- ???????? this doesnt work (remains same colour as last one in main )
context.fillRect(x -100,y ,50,50);  // <-- ???????? draws a square in blue, not white


}

Answer 1

因为你写了fillstyle而不是fillStyle。您需要将S大写。

它在Javascript中有效，因为您只是将新的fillstyle字段（不存在且无意义）附加到该上下文。

所以你要小心。错别字会造成很多麻烦，因为结果代码在技术上不是错误，但它肯定不是你想要的！

html5 javascript fillstyle不起作用

1 个答案: