大众计算机学习网

专门提供各种电脑教程

canvas载入图片的正确代码

Admin | 2016-5-28 8:34:51 | 被阅次数 | 1761

  在网上的很多地方,都讲到了canvas载入图片的各种方法,仍然,正确的没有几个,基本都是错误的,下面,本文纠正其错误,与大家分享正确的代码。

  一、网络的错误代码

  var img=new Image();
  img.src="123.jpg";
  var c=document.getElementById("qr-canvas");
  var cxt=c.getContext("2d");
  image.onload = function(){cxt.drawImage(img,0,0)}

  上面这段代码压根就不会让canvas载入图片。

  二、正确的代码

  var img=new Image();
  img.src="123.jpg";
  var c=document.getElementById("qr-canvas");
  var cxt=c.getContext("2d");
  img.onload = function(){cxt.drawImage(img,0,0)}

  注意看清楚,发现问题了没有。就是下面这一句。

  应该是:img.onload,而不是image.onload