Ran*_*bey 5 html javascript jquery html5 canvas
实际上,我可以使用img.onload函数来完成它.我从' HTML5 Canvas - 如何在图像背景上划线？".但我需要绘制的图像,而无需使用img来自onload函数,它是这样的:
var imagePaper = new Image();
imagePaper.onload = function(){
context.drawImage(imagePaper,100, 20, 500,500);
};
imagePaper.src = "images/main_timerand3papers.png";
}
但我希望能够在画布上绘制矩形,只需将img src附加到画布上方,就像:
<body>
<img id="scream" src="my.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.</canvas>
但是我无法在画布上绘制线条,无论是img是绘图还是形状都隐藏在后面.这是我的完整代码:
<!DOCTYPE html>
<head>
<title>Playing YouTube video on HTML5 canvas</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<img id="scream" src="my.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
Spe*_*rek 16
因为您不是在等待首先加载图像.在你的script添加中window.onload()
<script>
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
}
</script>
发生的事情是它试图在加载之前绘制图像,window.onload一旦整个文档被加载(例如图像),它就会调用代码.否则,它可能不显示图像或将其绘制成线条.