个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在涉足 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/
29
4
0
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我有一个可视化工具设置，它每 7.5 秒改变一次颜色，问题是，它立即改变颜色，你可以在 fillStyle 上使用 .animate() 吗？如果没有，有没有办法为 fillStyle 添加过渡？ 最
我收到一个不寻常的错误: ctx_wrap.fillStyle is not a function 在这一行: ctx_wrap.fillStyle('#b8b8b8'); 在这里: ... this
只是练习使用带有参数的构造函数，并且遇到了一个错误，我认为该错误源于 fillStyle 方法。 我的 Canvas 只是显示为空白，并且控制台上没有错误？ 尝试构建 5 个不同的圆圈，每个圆圈都有自
我正在检查我的游戏在拖尾效果下的性能会降低多少。但我注意到每秒的操作次数更多了。这怎么可能？ 这是怎么回事... context.fillRect(0, 0, 500, 500); // cl
所以我按照 this tutorial 制作了一个打砖 block 游戏这相当简单，但可选练习之一是让球在碰到 Canvas 一侧时改变颜色。该网站没有告诉您如何执行此操作，并且经过几个小时的谷歌搜索
这个问题在这里已经有了答案: fillStyle not a function (1 个回答) 关闭 5 年前。 我正在尝试显示图像，但我在使用 context.fillStyle 时遇到问题。它应
我正在尝试让我的 Canvas 使用来自 ARGB 整数数组的填充样式。 这是一个可以提升到 JSFiddle 中的最小工作示例: var ctx = $('#cv')[0].getContext("
也许我没有正确使用 Math.random()，尽管我不知道我做错了什么: ctx.fillStyle = "rgb(Math.floor(Math.random()*256),Math.floor(
在 JavaScript 中，是否可以在 lines() 中使用任何类型的 fillStyle ？ 这是我的代码: var text = document.getElementById("text")
这是我的代码: Rogue Game Sorry your browser does not support canvas! 和 Java
假设有人尝试按如下方式分配 var c = document.getElementById("canvasID"); var g = c.getContext("2d"); g.fillStyle =
有谁知道如何在 fillStyle 上设置渐变颜色，文档中提到这是可能的，但它没有任何示例，我不知道如何调用属性或方法来使用它。 http://dougtesting.net/winwheel/ref
我有一个有循环的函数。在循环中，它创建一个 Canvas 并设置不透明度。然后它设置背景颜色并将 Canvas 转换为图像。 不知何故， Canvas 上设置了不透明度，但背景颜色未设置。 if (r
我想这个问题的解决方案非常简单，如果这是非常明显的，请提前道歉，但我似乎无法弄清楚如何为两个不同的弧设置两个不同的 fillStyles ...我只是想能够绘制不同颜色的圆圈。下面我介绍了我通常如何在
我正在涉足 html5 和 javascript(我对两者一无所知)。找了一些html5的例子，复制过来，开始试验。这是一些代码。这个想法是，当按下任何键时，两个方 block 开始向左移动(还没有清
我最初写出了每一列和每一行，然后我试图进一步重构它。 var r0 = (r == 0); var r1 = (r == 1); var r2 = (r == 2); var r3 = (r == 3
JSFiddle Link (But, please read first) 假设，我有一个 400 x 200 的 Canvas 我在 Canvas 上添加了一个 40 x 40 的球:(参见下面
我正在使用 2D breakout tutorial from MDN 学习 Canvas 还有一个练习:每次球撞到墙上时，尝试将球的颜色更改为随机颜色。 在抽球之前，我检查球是否在墙内。如果它接触到
这段小代码间隔清除旧 Canvas 数据: // start interval ctx.save(); ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; ct
我是一名优秀的程序员,十分优秀！