Question

只显示普通画布并且图片不会加载

<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>

Answer 1

我对您的代码进行了一些更改请检查您是否要实现相同的功能。

jsfiddle link

代码如下已从该功能中删除egypt，请添加所需的参数以支持egypt

function draw_egypt()
{ 
  context.drawImage(egypt_img,0, 0);
}

Answer 2

一些建议和演示：http://jsfiddle.net/m1erickson/kJvj5/

在开始绘制任何图像之前预加载所有图像
创建一个draw()函数，根据已用时间绘制必要的图像。
使用requestAnimationFrame创建动画循环

示例结果：

enter image description here

在开始绘制任何图片之前预加载所有图片

此代码加载所有图像并在它们全部加载时调用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();

}

创建一个draw()函数，根据已用时间绘制必要的图像。

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
        );
    }


}

使用requestAnimationFrame创建动画循环。

这是使用高效requestAnimationFrame方法

创建动画循环的方法

function animate(time){

    // ask for another loop
    requestAnimationFrame(animate);

    // draw based on the elapsed time through 4 seconds (4000ms)
    draw(time%4000);

}

图像未在html5画布中加载

2 个答案: