html5文件style不生效,html5 javascript fillstyle不起作用

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\"; //

context.fillRect(x,y,50,50); //

x = x - 5;

context.fillstyle = \"white\"; //

context.fillRect(x -100,y ,50,50); //

}