drawImage()不工作
drawImage()不工作
提问于 2013-02-24 11:18:00
我正在读“用HTML5，CSS3和Javascript制作等距社交实时游戏”。
我并没有深入其中，我遇到了一个画布问题，这个问题已经困扰了我一天的大部分时间。
drawImage()似乎没有绘制。我已经研究了这个问题，并尝试了许多预加载图像的排列，但到目前为止都不起作用。
下面是我的代码：
HTML：
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>CSS：
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}和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();
} 任何帮助都将不胜感激！
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-25 07:56:26
你就快成功了..。
你只需要在绘制之前给出加载图像的时间。
您可以使用以下代码为图像提供加载时间：
var logoImg = new Image();
logoImg.onload = function() {
// At this point, the image is fully loaded
// So do your thing!
};
logoImg.src = "myPic.png";下面是完整的代码和一个提琴：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>Stack Overflow用户
发布于 2020-05-09 23:16:38
上面答案的简化版本。
//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);在CodePen上试用一下
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15048279
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号