html在画布中添加图片

沪飘大军

于 2018-02-02 14:56:25 发布

阅读量7.5k

点赞数 6

分类专栏：画布文章标签： web前端画布

本文链接：https://blog.youkuaiyun.com/weixin_37556481/article/details/79239107

版权

画布专栏收录该内容

1 篇文章

订阅专栏

最近看了一下画布的功能，画布作为html5的新功能还是蛮强大的,画布中还能增加图片，代码如下:

 
  <!DOCTYPE html> 
 
  <html> 
 
  <body> 
 
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 
 
  Your browser does not support the HTML5 canvas tag. 
 
  </canvas> 
 
  <script type="text/javascript"> 
 
  var c = document.getElementById("myCanvas"); 
 
  var ctx = c.getContext("2d"); 
 
  var img = new  Image(); 
 
  img.onload = function() { 
 
  ctx.drawImage(img, 0, 0); 
 
  }; 
 
  img.src = "1.png"; 
 
  </script> 
 
  </body> 
 
  </html> 
 
  关键词:canvas ,document.getElementById("myCanvas"),c.getContext("2d"),new Image(),onload,ctx.drawImage(img, 0, 0); 
 
  交流讨论请添加微信号:17312678391