javascript drawImage() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15048279/
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
drawImage() not working
提问by Jeremythuff
I am reading through "Making Isometric Social Real-Time Games with HTML5, CSS3 and Javascript."
我正在阅读“使用 HTML5、CSS3 和 Javascript 制作等距社交实时游戏”。
I am not far into it, and I have run into a canvas problem that has ahd me stumped for most of the day.
我并没有深入研究，而且我遇到了一个画布问题，这让我一天中的大部分时间都被难住了。
drawImage() does not seem to be drawing. I have researched the issue and have tried many permutations of pre-loading the image, but so far nothing is working.
drawImage() 似乎没有在绘图。我研究了这个问题，并尝试了许多预加载图像的排列，但到目前为止没有任何效果。
Here is my code:
这是我的代码：
HTML:
HTML：
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>
CSS:
CSS：
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}
and js:
和js：
window.onload = function() {
var canvas = document.getElementById('game');
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
var c = canvas.getContext('2d');
function showIntro() {
var phrase = "Click or tap screen to start";
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, canvas.width, canvas.height);
var logoImg = new Image();
logoImg.src = '../img/logo.png';
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.font = "bold 16px sans-serif";
var mt = c.measureText(phrase);
var xcoord = (canvas.width / 2 ) - (mt.width / 2);
c.fillStyle = '#656565'
c.fillText (phrase, xcoord, 30);
}
showIntro();
}
Any help would be appreciated!
任何帮助，将不胜感激！
回答by markE
You almost have it...
你几乎拥有它......
You just have to give the image time to load before drawing it.
您只需要在绘制之前给图像加载时间。
You give an image time to load with this code:
您可以使用以下代码加载图像时间：
var logoImg = new Image();
logoImg.onload = function() {
// At this point, the image is fully loaded
// So do your thing!
};
logoImg.src = "myPic.png";
Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/GKK39/
这是完整的代码和小提琴：http: //jsfiddle.net/m1erickson/GKK39/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var c=canvas.getContext("2d");
function showIntro() {
var phrase = "Click or tap screen to start";
var logoImg=new Image();
logoImg.onload=function(){
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, canvas.width, canvas.height);
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.font = "bold 16px sans-serif";
var mt = c.measureText(phrase);
var xcoord = (canvas.width / 2 ) - (mt.width / 2);
c.fillStyle = '#656565'
c.fillText (phrase, xcoord, 30);
}
logoImg.src="http://dl.dropbox.com/u/139992952/car.png";
}
showIntro();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
回答by Hitesh Sahu
A simplified version of the above answer.
上述答案的简化版本。
//Create Canvas
var canvas = document.createElement("canvas");
canvas.width = 720
canvas.height = 500;
//Get Context
var ctx = canvas.getContext("2d");
ctx .fillStyle = "black";
ctx .fillRect(0, 0, canvas.width, canvas.height);
//Load Image
var img = new Image();
img.src = "https://images.pexels.com/photos/3722151/pexels-photo-3722151.jpeg";
img.onload = function() {
ctx .drawImage(
img,
0,
0,
canvas.width,
canvas.height
);
};
//Add Canvas
canvas.id = "fatLady";
document.body.appendChild(canvas);
Try it on CodePen
在 CodePen 上试试
