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

2019-12-18,,,,,

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • js canvas实现5张图片合成一张图片
  • js canvas实现二维码和图片合成的海报
  • JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
  • JS和Canvas实现图片的预览压缩和上传功能
  • js HTML5 canvas绘制图片的方法
  • js实现canvas图片与img图片的相互转换的示例
  • JS HTML图片显示Canvas 压缩功能
  • js canvas实现放大镜查看图片功能
  • javascript结合canvas实现图片旋转效果
  • 使用JavaScript+canvas实现图片裁剪
  • js+canvas实现两张图片合并成一张图片的方法

《js+html5绘制图片到canvas的方法.doc》

下载本文的Word格式文档,以方便收藏与打印。