如何在 HTML canvas 中呈现自定义 Class 对象

Question

已解决 必须在绘制方法之外全局渲染图像。如果您发现这个问题并且想知道完整代码中的解决方案是什么样子，那么这里是 link 到 github。 post 在这里作为更新有点太长了。 github canvas orbs

回到原题：

我正在尝试在 HTML canvas 中呈现自定义 Class 对象。不适用于 class，但相同的数据在没有 class.

的情况下仍然有效

代码如下：

import './styles/index.css';

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

var window_height = window.innerHeight;
var window_width = window.innerWidth;

canvas.width = 500;
canvas.height = 400;

canvas.style.background = "#232a2e"

const convertSVG = (svgid) => {
    const svg = document.getElementById(svgid);

    const xml = new XMLSerializer().serializeToString(svg);

    const svg64 = btoa(xml);
    const b64Start = 'data:image/svg+xml;base64, ';

    return b64Start + svg64;
}

class Orb {
    constructor(xpos, ypos, radius, speed, image) {
        this.xpos = xpos;
        this.ypos = ypos;
        this.radius = radius;
        this.speed = speed;
        this.image = convertSVG(image);
    }


    draw(context) {
        const img  = new Image();

        img.onload = function() {
            context.save();
            context.beginPath();
            context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI * 2, false);
            context.clip();
            context.drawImage(img, (this.xpos - this.radius), (this.ypos - this.radius), 64, 64);
            context.restore();
        }
        img.src = this.image;

    }
}

const myOrb = new Orb(150, 150, 30, 1, 'javascript-icon');
myOrb.draw(context);
console.log(myOrb);


const img  = new Image();

img.onload = function() {
    context.save();
    context.beginPath();
    context.arc(300, 300, 30, 0, Math.PI * 2, false);
    context.clip();
    context.drawImage(img, (300-32), (300-32), 64, 64);
    context.restore();
}
img.src = convertSVG('javascript-icon');

目前只显示我在代码底部明确绘制的对象，而不是class Orb的对象。

这是 canvas 的屏幕截图：

current canvas render

编辑：另外，我可以生成一个class对象并以此为基础绘制球体。像这样：

const myOrb = new Orb(300, 300, 30, 1, 'javascript-icon');
const myOrb2 = new Orb(150, 150, 30, 1, 'java-icon');

const img  = new Image();

img.onload = function() {
    context.save();
    context.beginPath();
    context.arc(myOrb.xpos, myOrb.ypos, myOrb.radius, 0, Math.PI * 2, false);
    context.clip();
    context.drawImage(img, (myOrb.xpos-myOrb.radius-2), (myOrb.ypos-myOrb.radius-2), 64, 64);
    context.restore();
}
img.src = myOrb.imageSRC;


console.log(myOrb);
console.log(myOrb2);

myOrb2.draw(context);

myOrb渲染了，但是用class方法绘制的myOrb2没有渲染。

Answer 1

这里有一个方法可以采用。全局加载图片并在加载图片时调用绘制。

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

var window_height = window.innerHeight;
var window_width = window.innerWidth;

canvas.width = 500;
canvas.height = 400;

canvas.style.background = "#232a2e"

const img1  = new Image();
img1.src = 'https://cdn.iconscout.com/icon/free/png-256/javascript-2752148-2284965.png';
const img2 = new Image();
img2.src = 'https://iconape.com/wp-content/png_logo_vector/cib-javascript.png'

class Orb {
    constructor(xpos, ypos, radius, speed, image) {
        this.xpos = xpos;
        this.ypos = ypos;
        this.radius = radius;
        this.speed = speed;
        this.image = image;
    }
    draw(context) {
            context.save();
            context.beginPath();
            context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI * 2, false);
            context.clip();
            context.drawImage(this.image, (this.xpos - this.radius), (this.ypos - this.radius), 64, 64);
            context.restore();
    }
}

const myOrb = new Orb(150, 150, 30, 1, img1);
const myOrb2 = new Orb(350, 150, 30, 1, img2);

window.onload = function() {
myOrb.draw(context);
myOrb2.draw(context);
}

<canvas id="canvas"></canvas>

如何在 HTML canvas 中呈现自定义 Class 对象

How to render custom Class objects in HTML canvas

html

javascript

css

canvas