Рисование изображения на холсте в HTML5

Я пытаюсь получить изображение, нарисованное на холсте, но не смог этого сделать. Код HTML просто создает элемент canvas1 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);

Любая помощь, которую вы могли бы дать, была бы потрясающей! Я пробовал это много способов и застрял.

Благодарю, Брайан

2 ответа

Поместите свою onload-функцию для img, прежде чем назначать img src


Изменить эту часть

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

в

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

Я бы хотел, чтобы QBM5 также рекомендовал установить src после установки onload чтобы убедиться, что он правильно инициализирован.

licensed under cc by-sa 3.0 with attribution.