javascript html5 画布上下文 .fillStyle 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12119869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 canvas context .fillStyle not working
提问by Holly
Just giving canvas a go for the first time with the intention of creating a game. I have an image displaying but oddly the fillStyle method doesn't seem to be working. ( At least the canvas background is still white in google chrome.)
只是为了创建游戏而第一次尝试使用 canvas。我有一个图像显示，但奇怪的是 fillStyle 方法似乎不起作用。（至少画布背景在谷歌浏览器中仍然是白色的。）
Note that in my code the canvas var is actually the canvas elements 2d context, maybe that's where i'm getting myself confused? i can't see the problem, would appreciate if anyone else could.
请注意，在我的代码中，canvas var 实际上是 canvas 元素的 2d 上下文，也许这就是我让自己感到困惑的地方？我看不到问题，如果其他人可以，我将不胜感激。
LD24.js:
LD24.js：
const FPS = 30;
var canvasWidth = 0;
var canvasHeight = 0;
var xPos = 0;
var yPos = 0;
var smiley = new Image();
smiley.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
var canvas = null;
window.onload = init; //set init function to be called onload
function init(){
canvasWidth = document.getElementById('canvas').width;
canvasHeight = document.getElementById('canvas').height;
canvas = document.getElementById('canvas').getContext('2d');
setInterval(function(){
update();
draw();
}, 1000/FPS);
}
function update(){
}
function draw()
{
canvas.clearRect(0,0,canvasWidth,canvasHeight);
canvas.fillStyle = "#FFAA33"; //orange fill
canvas.drawImage(smiley, xPos, yPos);
}
LD24.html:
LD24.html：
<html>
<head>
<script language="javascript" type="text/javascript" src="LD24.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600">
<p> Your browser does not support the canvas element needed to play this game :(</p>
</canvas>
</body>
</html>
采纳答案by Jakub Hampl
3 notes:
3注意事项：
fillStyledoes not cause your canvas to be filled. It means that when you filla shapeit will be filled with that color. Therefore you need to writecanvas.fillRect( xPos, yPos, width, height).Wait until your image actually loads, otherwise the rendering may be inconsistent or buggy.
Careful of cross-domain images used in your canvas - most browsers will throw a security exception and stop executing your code.
fillStyle不会导致您的画布被填满。这意味着当你填充一个形状时，它会被那个颜色填充。因此你需要写canvas.fillRect( xPos, yPos, width, height).等到您的图像实际加载，否则渲染可能会不一致或有问题。
小心画布中使用的跨域图像 - 大多数浏览器会抛出安全异常并停止执行您的代码。
回答by C..
Wait till image loads as well:
等到图像加载为好：
var img = new Image();
img.onload = function() {
handleLoadedTexture(img);
};
img.src = "image.png";
function handleLoadedTexture(img) {
//call loop etc that uses image
};
