如何解决html5 javascript fillstyle不起作用
| 我正在使用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,800,800);
context.fillStyle = \"red\";
context.fillRect(0,30,30);
context.fillRect(0,100,30);
context.fillStyle = \"green\";
context.fillRect(0,200,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,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\",400);
context.fillStyle = \"blue\";
context.fillRect(0,300,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); // <-- ???????? 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,50); // <-- ???????? draws a square in blue,not white
}
解决方法
因为您写的是“ 1”而不是“ 2”。您需要大写S。
它在Javascript中是有效的,因为您只是将新的
fillstyle
字段(不存在并且没有意义)附加到该上下文。
所以你要小心。打字错误可能会造成很多麻烦,因为从技术上讲,生成的代码不是错误,但肯定不是您想要的!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。