代码之家 › 专栏 › 技术社区 › Mykyta_GloryToUkraine

JS drawImage作为类中的方法

drawimage html5-canvas javascript

0

Mykyta_GloryToUkraine · 技术社区 · 3 年前

几天前,我用javascript启动了一个简单的项目,并发现了这个问题。每次我重新加载我的谷歌页面,我都会得到一个空画布。我已经尝试过把drawImage()函数从类中去掉,它成功了。但是,如果我需要将该函数用作类方法,该怎么办?(此外,我已经尝试将画布作为draw方法的参数传递,但它不起作用)

这很有效,但我不需要

const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')

var img = new Image()
img.src = 'some source'
ctx.drawImage(img,10,10)

这不起作用,但应该

const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')

class Person
{
  constructor(name){
    this.name = name
    this.img = new Image()
    this.img.src = 'some source'
  }
  draw(){
    ctx.drawImage(this.img,10,10)
  }
}

var peter = new Person('Peter Griffin')
peter.draw()

1 回复 | 直到 3 年前

1

Alexandre Baux 3 年前

原因很简单。要绘制图像时,图像未加载。

在画布中绘制图像之前,必须等待图像加载。

const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')

class Person
{
    constructor(name){
        this.name = name;
        this.img = new Image()
        this.img.src = 'monimage.jpg'
    }
    on_image_loaded(f) {
        this.img.onload = f;
    }
    draw(){
        ctx.drawImage(this.img,10,10)
    }
}

var peter = new Person('Peter Griffin')
peter.on_image_loaded(function() {
    peter.draw();
});