html5 javascript fillstyle не работает

#javascript #html #canvas

#javascript #HTML #холст

Вопрос:

Я балуюсь с 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


}

Ответ №1:

Потому что вы написали fillstyle , а не fillStyle . Вам нужно использовать заглавную букву S.

Это допустимо в Javascript, потому что вы просто присоединяете новое fillstyle поле (которое не существует и не имеет смысла) к этому контексту.

Так что вы должны быть осторожны. Опечатки могут вызвать много проблем, потому что результирующий код технически не является ошибкой, но это определенно не то, что вы хотите!