[英]images not loading in html5 canvas
only a plain canvas shows up and the images don't load 仅显示普通画布,并且不加载图像
<canvas width=800 height=500 id='egypt_id'></canvas>
<script>
//setup
var canvas = document.getElementById('egypt_id');
var context = canvas.getContext('2d');
var mubarak_x = 700;
var mubarak_y = 50;
var morsi_x = 25;
var morsi_y = 150;
var qm_x = 500;
var qm_y = 200;
//make new image objects
var egypt_img = new Image();
var mubarak_img = new Image();
var morsi_img = new Image();
var qm_img = new Image();
//these functions draw images on the canvas, at the given position
egypt.onload=function draw_egypt()
{
context.drawImage(egypt_img,0, 0);
}
function draw_mubarak()
{
//image
context.drawImage(mubarak_img, mubarak_x, mubarak_y);
//label
context.fillStyle = 'black';
context.font = 'bold 16px Arial';
context.fillText('Mubarak', mubarak_x, mubarak_y);
}
function draw_morsi()
{
//image
context.drawImage(morsi_img, morsi_x, morsi_y);
//label
context.fillStyle = 'black';
context.font = 'bold 16px Arial';
context.fillText('Morsi', morsi_x, morsi_y);
}
function draw_qm()
{
//image
context.drawImage(qm_img, qm_x, qm_y);
//label
context.fillStyle = 'black';
context.font = 'bold 16px Arial';
context.fillText('?', qm_x, qm_y);
}
//load images
//draw this image as soon as it loads
egypt_img.onload = draw_egypt;
egypt_img.src = 'media/egypt.png';
function line_mubarak_morsi()
{
//draw line between mubarak and morsi
context.lineWidth = 5;
context.strokeStyle = 'lightblue';
//pick-up pen
context.beginPath();
//start
context.moveTo(mubarak_x, mubarak_y);
//end
context.lineTo(morsi_x, morsi_y);
//draw it
context.stroke();
}
function line_morsi_qm()
{
//draw line between morsi and qm
context.lineWidth = 5;
context.strokeStyle = 'lightblue';
//pick-up pen
context.beginPath();
//start
context.moveTo(morsi_x, morsi_y);
//end
context.lineTo(qm_x, qm_y);
//draw it
context.stroke();
}
function redraw()
{
//redraws everything, spread over three seconds...
//immediately draw background (covering all old stuff)
draw_egypt();
//after one second
setTimeout(draw_mubarak, 1000);
//after two seconds
setTimeout(line_mubarak_morsi, 2000);
setTimeout(draw_morsi, 2000);
//after three seconds
setTimeout(line_morsi_qm, 3000);
setTimeout(draw_qm, 3000);
}
//finally: call the redraw function every four seconds, forever...
setInterval(redraw, 4000);
</script>
I made some changes to your code Please check whether you want to implement the same. 我对您的代码进行了一些更改,请检查您是否要实现相同的代码。
Code is as below removed egypt
from the the function, please add the required params to support egypt
代码如下,从功能中删除了egypt
,请添加所需的参数以支持egypt
function draw_egypt()
{
context.drawImage(egypt_img,0, 0);
}
Some suggestions and a Demo: http://jsfiddle.net/m1erickson/kJvj5/ 一些建议和演示: http : //jsfiddle.net/m1erickson/kJvj5/
preload all your images before you start drawing any of them 在开始绘制任何图像之前,请预加载所有图像
create a single draw()
function that draws necessary images based on elapsed time. 创建一个单个draw()
函数,该函数根据经过的时间绘制必要的图像。
use requestAnimationFrame
to create an animation loop 使用requestAnimationFrame
创建动画循环
Example results: 结果示例:
Preload all your images before you start drawing any of them 在开始绘制任何图像之前,请预加载所有图像
This code loads all the images and calls start()
when they are all fully loaded: 这段代码将加载所有图像,并在所有图像完全加载后调用start()
:
// variables for image objects
var egypt,mubarak,morsi,qm;
// load all images first then call start() when fully loaded
var imageURLs=[]; // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/egypt.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/sillouette1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/sillouette2.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/qm.png");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
// get name references to the images
egypt=imgs[0];
mubarak=imgs[1];
morsi=imgs[2];
qm=imgs[3];
// resize the canvas to the egypt image size: imgs[0]
canvas.width=egypt.width;
canvas.height=egypt.height;
// start the animation
animate();
}
Create a single draw()
function that draws necessary images based on elapsed time. 创建一个单个draw()
函数,该函数根据经过的时间绘制必要的图像。
The draw()
function will draw each image based on how much time has elapsed. draw()
函数将根据经过的时间绘制每个图像。
function draw(elapsed){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw Egypt
ctx.drawImage(egypt,0,0);
// draw mubarak after 1 second
if(elapsed>1000){
ctx.drawImage(mubarak,20,20);
}
// draw line after 2 seconds
if(elapsed>2000){
ctx.moveTo(canvas.width,0);
ctx.lineTo(0,canvas.height);
ctx.lineWidth=3;
ctx.stroke();
}
// draw morsi after 2 second2
if(elapsed>2000){
ctx.drawImage(morsi,
canvas.width-morsi.width-20,
canvas.height-morsi.height-20
);
}
// draw qm after 3 second
if(elapsed>3000){
var resizedWidth=qm.width/3;
var resizedHeight=qm.height/3;
ctx.drawImage(qm,
canvas.width/2-resizedWidth/2,
canvas.height/2-resizedHeight/2,
resizedWidth,
resizedHeight
);
}
}
Use requestAnimationFrame
to create an animation loop. 使用requestAnimationFrame
创建动画循环。
This is how to create an animation loop using the highly efficient requestAnimationFrame
method 这是使用高效的requestAnimationFrame
方法创建动画循环的方法
function animate(time){
// ask for another loop
requestAnimationFrame(animate);
// draw based on the elapsed time through 4 seconds (4000ms)
draw(time%4000);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.