时间戳

首页 > 解决方案 > 如何使用 Javascript 在画布上创建和绘制图像数组？

javascript - 如何使用 Javascript 在画布上创建和绘制图像数组？

问题描述

我正在尝试使用以下代码来创建图像，允许附加自定义值并在 HTML 画布上绘制。它似乎没有工作。

var canvas = document.getElementById('mainCanvas');
var context = canvas.getContext('2d');
function CreateObject(objectImage){
    lastIndex++;
    PlanObjects[lastIndex] = new PlanObject(lastIndex,currentSlide,24,24,24,24,objectImage);
    context.drawImage(PlanObjects[lastIndex].img,PlanObjects[lastIndex].posX,PlanObjects[lastIndex].posY);
}

var PlanObjects = [];
var lastIndex = -1;
var currentSlide = 0;

function PlanObject(id, slide, width, height, posX, posY, img){
    this.id = id;
    this.slide = slide;
    this.width = width;
    this.height = height;
    this.posX = posX;
    this.posY = posY;
    this.img = new Image(img);
}

CreateObject("imgs/icons_star.png");

HTML：

<div id="mainCanvasDiv"><canvas width="800" height="600" id="mainCanvas"></canvas>

我希望创建对象，将其存储在 PlanObjects 数组中（使用它的客户值）并将其绘制到画布上，但它似乎没有这样做。

标签： javascripthtmlcanvas

解决方案

1) 图像构造函数的输入参数是宽度和高度。并且您必须单独设置源：

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);

[ https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image ]

2）加载图片是异步的，所以需要处理load事件：

PlanObjects[lastIndex].img.addEventListener('load', function() {
  context.drawImage(PlanObjects[lastIndex].img, PlanObjects[lastIndex].posX, PlanObjects[lastIndex].posY)
});

[ https://developer.mozilla.org/en-US/docs/Web/Events/load ]

[ https://jsfiddle.net/bvupyroc/ ]

推荐阅读