js HTML5 canvas绘制图片的方法
2017-09-08 08:39
1071 查看
本文实例为大家分享了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绘制图片到canvas的方法
- JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
- js实现canvas保存图片为png格式并下载到本地的方法
- 使用JavaScript+canvas实现图片裁剪
- Js利用Canvas实现图片压缩功能
- js实现canvas图片与img图片的相互转换的示例
- JavaScript+html5 canvas实现图片破碎重组动画特效
- javascript结合canvas实现图片旋转效果
- Canvas + JavaScript 制作图片粒子效果
- js canvas实现放大镜查看图片功能
- JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
相关文章推荐
- js+html5绘制图片到canvas的方法
- js+html5绘制图片到canvas的方法
- js+html5通过canvas指定开始和结束点绘制线条的方法
- HTML5 Canvas 开发 绘图方法整理 【六、canvas image /canvas绘制图片、平铺图片】
- js+html5实现canvas绘制圆形图案的方法
- js+html5实现canvas绘制椭圆形图案的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5实现canvas绘制圆形图案的方法
- js+html5实现canvas绘制简单矩形的方法
- js+html5实现canvas绘制网页时钟的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5通过canvas指定开始和结束点绘制线条的方法
- HTML5——Canvas画布绘制图像、绘制线型和绘制图片
- html5使用canvas绘制一张图片
- HTML5 canvas 9绘制图片实例详解
- 解决Html5用canvas绘制不出来图片的问题
- 推荐的html5知识:Canvas KineticJS图片教程!
- HTML5那些故事:Canvas的KineticJS图片教程!
- [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格
- Android 使用Canvas在图片上绘制文字的方法