gpt4 book ai didi

javascript - html5 javascript fillstyle 不起作用

转载 作者:行者123 更新时间:2023-11-30 18:43:27 28 4
gpt4 key购买 nike

我正在涉足 html5 和 javascript(我对两者一无所知)。找了一些html5的例子,复制过来,开始试验。这是一些代码。这个想法是,当按下任何键时,两个方 block 开始向左移动(还没有清理它后面)。我不明白的是为什么我不能改变颜色(我在下面指出)。有任何想法吗?我显然做错了什么。

<!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


}

最佳答案

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

它在 Javascript 中有效,因为您只是将一个新的 fillstyle 字段(它不存在且无意义)附加到该上下文。

所以你要小心。拼写错误会造成很多麻烦,因为生成的代码在技术上不是错误,但它肯定不是您想要的!

关于javascript - html5 javascript fillstyle 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6167535/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com