js HTML5 canvas绘制图片的方法
更新时间:2017年09月08日 08:39:34 作者:1点
这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
图片:
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- js HTML5多图片上传及预览实例解析(不含前端的文件分割)
- HTML5 JS压缩图片并获取图片BASE64编码上传
- 基于HTML5+JS实现本地图片裁剪并上传功能
- JS HTML5拖拽上传图片预览
- JS+HTML5实现上传图片预览效果完整实例【测试可用】
- JS+html5实现异步上传图片显示上传文件进度条功能示例
- 手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
- js+html5绘制图片到canvas的方法
- JavaScript+html5 canvas实现图片破碎重组动画特效
- JS+HTML5实现图片在线预览功能
- javascript实现移动端 HTML5 图片上传预览和压缩功能示例
相关文章
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
JS只是一门支持面向对象编程的语言,通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚2011-12-12javascript 操作cookies及正确使用cookies的属性
在 JS(JavaScript) 操作cookies比较复杂,在 ASP 里面我们只需要知道 cookie 的名称、cookie 的值就行了,而 JS 里面,我们面对的是 cookie 的字符串,你自己编写这个字符串写入客户端,然后自己解析这个字符串。2009-10-10
最新评论