【HTML5】Canvas绘制简单图片教程
发布时间：2016-05-13 15:03:41 作者：佚名 
我要评论
我要评论下面小编就为大家带来一篇【HTML5】Canvas绘制简单图片教程。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
获取Image对象，new出来
定义Image对象的src属性，参数：图片路径
定义Image对象的onload方法，调用context对象的drawImage()方法，参数：Image对象，x坐标，y坐标
重载方法，调用context对象的drawImage()方法，参数：Image对象，x坐标，y坐标，图像宽度，高度
重载方法，调用context对象的drawImage()方法，
参数：
Image对象，图像上x坐标，图像上y坐标，矩形宽度，矩形高度，画在画布上的x坐标，画在画布上的y坐标，图像宽度，图像高度
调用context对象的getImageData()方法，得到像素颜色数组，参数：x坐标，y坐标，x宽度，y宽度
调用context对象的putImageData ()方法，设置图片颜色，参数：ImageData对象，x坐标，y坐标
JavaScript Code复制内容到剪贴板
- var canvas=document.getElementById('myCanvas');
- var context=canvas.getContext("2d");
- //绘制图片
- var img=new Image();
- img.src="1.jpg";
- img.onload=function(){
- //context.drawImage(img,0,0);
- //context.drawImage(img,0,0,100,100);
- context.drawImage(img,180,160,100,100,0,0,100,100);
- var imagedata=context.getImageData(0,0,100,100);
- for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
- imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
- imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
- imagedata.data[i + 2] = 255 - imagedata.data[i + 2];
- }
- context.putImageData(imagedata,0,0);
- }
以上这篇【HTML5】Canvas绘制简单图片教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持程序员之家。
相关文章
是一段实现了五款轻量级绘制SVG轮廓线路径动画效果代码，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用2016-05-16- 下面小编就为大家带来一篇html5 实现客户端验证上传文件的大小(简单实例)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-15
这是一款html5基于鼠标滚动控制植树生长动画特效源码，伴随着鼠标滚轮的滚动可呈现出树木生长的动画效果。整体动画渐变效果流畅自然2016-05-13HTML5实现页面切换激活的PageVisibility API使用初探
这篇文章主要介绍了HTML5实现页面切换激活的PageVisibility API使用初探,PageVisibility可以使我们在切换浏览器tab页面时自动停止和播放视频,需要的朋友可以参考下2016-05-13HTML5的Geolocation地理位置定位API使用教程
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用,今天这篇文章就向大家介绍一下HTML5的Geolocation地理2016-05-12- 链接中加入download属性可以使用户将文件下载下来而不是直接用浏览器打开,截止到目前为止对HTML5提供支持的浏览器已经对这个属性支持得比较好了,下面我们就来详细看一下HTM2016-05-12
- 下面小编就为大家带来一篇HTML5事件方法全部汇总。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-12
HTML5全屏响应式缩放切换幻灯片代码是一款切换的时候当前slide会平滑缩小并移动，下一个slide会从缩小状态逐渐放大并移动到屏幕中间，效果不错。需要的朋友前来下载源码哦2016-05-10- 下面小编就为大家带来一篇深入理解HTML的FormData对象。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦2016-05-17
最新评论