html5 javascript fillstyle doesnt work_问答_开发者

开发者 https://www.devze.com 2023-03-08 21:22 出处：网络

I\'m dabbling with html5 and javascript (I know nothing of both). I found an example of some html5, copied it,and started experimenting. Heres some code. The idea is that when any key is pressed, two

I'm dabbling with html5 and javascript (I know nothing of both). I found an example of some html5, copied it, and started experimenting. Heres some code. The idea is that when any key is pressed, two squares start moving left (doesn't clean up behind it yet). What I don't understand is why I cant change colour (Ive indicated below). Any ideas? Im obviously doing something very wrong.

<!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 rainb开发者_运维问答ow = 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


}

Because you wrote fillstyle and not fillStyle. You need to capitalize the S.

It is valid in Javascript because you are just attaching a new fillstyle field (which does not exist and is meaningless) to that context.

So you gotta be careful. Typos can cause lots of trouble, because the resulting code isn't technically an error, but its certainly not what you want!