javascript - 使用 HTML5 在 Canvas 上绘制图像

Question

我一直试图在 Canvas 上绘制图像，但未能成功。 HTML 代码仅创建 Canvas 元素“canvas1”，无需额外处理。

这是 JS:

function loadlogo(){
    var logo = new Image();
    var canvas = document.getElementById('canvas1');
    var context = canvas.getContext('2d');
    //resize the canvas to the current window
    context.canvas.width = window.innerWidth;
    context.canvas.height = window.innerHeight / 3;
    logo.src = "images/1.png";
    logo.onload = function() {context.drawImage(logo,0,0;};
    context.shadowOffsetX = 50;
    context.shadowOffsetY = 30;
    context.shadowColor = "pink";
    }

    window.addEventListener("load",loadlogo,false);
    window.addEventListener("resize",loadlogo,false);

您能提供的任何帮助都会很棒! 我已经尝试了很多方法，但陷入困境。

谢谢， 布莱恩

Answer 1

在分配 img src 之前放置 img 的 onload 函数