Question

我一直试图在画布上绘制一幅图像，但却未能这样做。 HTML代码只是创建了canvas元素＆＃34; canvas1＆＃34;没有额外的处理。

这是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之前将imload的onload函数放入

Answer 2

更改此部分

{context.drawImage(logo,0,0;};
                           ^ Notice the missing end-parenthesis here

到

{context.drawImage(logo,0,0)};

我希望QBM5还建议在设置src之后设置onload以确保它已正确初始化。

在HTML5中在画布上绘制图像

2 个答案: