首页 > 编程 > JavaScript > 正文

js HTML5 canvas绘制图片的方法

2019-11-19 15:30:49
字体:
来源:转载
供稿:网友

本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下

demo.js

window.onload=function() {  createcanvas();   drawImage();} function createcanvas() {   var CANVAS=document.getElementById('mycanvas');   context=CANVAS.getContext('2d'); } function drawImage() {  var img=new Image();  img.onload=function() {    context.drawImage(img,0,0,200,200 );  }  img.src="img5.jpg";}

demo.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>canvas</title>   <script type="text/javascript" src="demo.js"></script></head><body>  <canvas id="mycanvas"  width="400" hight="400" ><span>你的浏览器不支持canvas</span></canvas> </body></html>

图片:

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表