canvas的drawImage方法

问题描述

问 题

drawImage绘制多个图片，多次刷新有时某个图片不能显示出来（图片路径没有问题，本地服务器测试），下面贴上代码

// 获取画布
var c=document.getElementById("myCanvas");
// 获取绘制上下文
var ctx=c.getContext("2d");

// 定义图片对象
var img  = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();

// 设置对象对应的src属性
img.src  = "1.png";
img2.src = "2.png";
img3.src = "3.png";
img4.src = "4.png";

// 在画布绘制对应图片
img.addEventListener("load", function() {
    // 设置画布大小
    c.width = this.width;
    c.height = this.height;
    ctx.drawImage(img, 0, 0, this.width, this.height);
}, false);
img2.addEventListener("load", function() {
    ctx.drawImage(img2, 0, 0, img2.width, img2.height);
}, false)
img3.addEventListener("load", function() {
    tx.drawImage(img3, 0, 0, img3.width, img3.height);
}, false)
img4.addEventListener("load", function() {
    ctx.drawImage(img4, 0, 0, img4.width, img4.height);
}, false)

解决方案

// 图片路径数组
var img = ["1.png", "2.png", "3.png", "4.png"];
// 获取画布绘制上下文
var cxt = document.getElementById("mycanvas").getContext("2d");

// arr参数为存放图片路径的数组
function preloadImages(arr) {
    // 用于放置新图片对象的数组
    var newImages= [];
    var num = 0;

    for(var i = 0; i < arr.length; i ++){
       newImages[i] = new Image();
       newImages[i].src = arr[i];
       newImages[i].onload = function() {
            // 图片加载好需要执行的函数
            fn();
       }
       newImages[i].onerror = function() {
           fn()
       } 
   }

    // 定义图片加载完毕后需要执行的函数
    function fn() {
        num++;
        // 判断数组是否完全加载传入的图片
        if(num === arr.length){
            for(var i = 0; i < newImages.length; i ++){
                // 绘制图像
                cxt.drawImage(newImages[i], 0, 0);
            }
        }
    }
}

// 调用函数
preloadImages(img);

这篇关于canvas的drawImage方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！