个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
这是我的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Rogue Game</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="canvasGame()">
<canvas id="myCanvas" width="800" height ="800">
<p>Sorry your browser does not support canvas!</p>
</canvas>
</body>
</html>
和 JavaScript:
function canvasGame() {
canvas = document.getElementById("myCanvas");
if(canvas.getContext) {
ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fill();
}
}
我得到的控制台输出是:
文件:///Users/darceymckelvey/Documents/Rogue/css/style.css文件:///Users/darceymckelvey/Documents/Rogue/js/main.js得到 https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js [HTTP/2.0 304 未修改 60ms]文件:///Users/darceymckelvey/Documents/Rogue/css/style.css
我的 Canvas 不是白色的，它只是我在 CSS 中设置主体的颜色。
最佳答案
您在脚本中缺少“var”。您也没有任何对象可以填充颜色。因此，您必须创建一个以便用颜色填充它。请参阅this documentation on fill()了解更多信息。这是一个有效的示例:
<html>
<head>
<meta charset="utf-8" />
<title>Rogue Game</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="canvasGame()">
<canvas id="myCanvas" width="800" height ="800">
<p>Sorry your browser does not support canvas!</p>
</canvas>
<script>
function canvasGame() {
var canvas = document.getElementById("myCanvas");
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "white";
ctx.fill();
}
}
</script>
</body>
</html>
关于javascript - .fillStyle 不起作用，控制台中没有错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36814589/
28
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
我是一名优秀的程序员,十分优秀！