Home > Article > Web Front-end > js+html5绘制图片到canvas的方法_javascript技巧

js+html5绘制图片到canvas的方法_javascript技巧

WBOYOriginal: 2016-05-16 15:56:221289browse

本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下：

<!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="img_flwr.png";
</script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》《JavaScript运动效果与技巧汇总》及《JavaScript数据结构与算法技巧总结》

希望本文所述对大家的web程序设计有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery插件bgStretcher.js实现全屏背景特效_jqueryNext article：判断访客终端类型集锦_javascript技巧

See more

js+html5绘制图片到canvas的方法_javascript技巧

Related articles