HTML使用canvas载入图片

最新推荐文章于 2024-11-27 14:14:19 发布

转载最新推荐文章于 2024-11-27 14:14:19 发布 · 2.9k 阅读

文章标签：

#html5

Html5，Css3 专栏收录该内容

16 篇文章

订阅专栏

（1）JS实现代码如下：

[objc]view plain copy 
   
 print?
 /** 
  * Created by chenyufeng on 15/9/27. 
  */  
 var CANVAS_WIDTH = 500, CANVAS_HEIGHT = 500;  
 var mycanvas,context;  
   
 window.onload = function(){  
   
     createCanvas();  
     drawImage();  
   
 };  
   
 function createCanvas(){  
   
     document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";  
   
     mycanvas = document.getElementById("mycanvas");  
     context = mycanvas.getContext("2d");  
   
 }  
   
 function drawImage(){  
   
     var img = new Image();  
     img.onload = function(){  
   
         context.drawImage(img,0,0);  
     };  
     img.src = "1.png";  
   
 }  

（2）HTML代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
     <script src="app.js"></script>  
   
 </body>  
 </html>  