canvas的魔法,X光效果
一 图片预览
HTML5给web开发带来很多好东西,可以说,它将开创新一代web开发。
其中canvas就是它带来的东西之一,canvas非常强大,可以做到很多东西,不过我觉得学习canvas几乎等于在学习一种独立的技术了。这里只是展示一个简单的canvas效果。如下图:
二 原理介绍
我在代码中通过ctx.getImageData(0,0,width,height);获取canvas里面的imagedata对象,而这个对象就是这个效果实现的关键。
我们可以通过imagedata.data来获取一个数组,这个数组的length是canvas像素数量的四倍,其中每四个项代表一个像素。在每四个项里,他们一次代表rgba,rgb就很明显了,而a就代表透明,当a为255的时候完全不透明,当a为0的时候就是透明的。而这次的效果无需用到透明,所以没对这个进行操作。
最后我通过ctx.putImageData(imageData,0,0);把处理过的Imagedata放回去。请注意看代码以及注释。
注:下面那个img的src值是我本机的,因为将外链的图片添加到canvas里面的话会引发Security错误,所以在demo里面我把图片转化为DataURL来使用的。
三 代码以及demo
window.onload = function() {
var photo=document.getElementById("photo");
photo.onload=function(){//把图像处理函数添加为目标图片的onload时间,因为只有图片已经加载,才能用canvas对其进行操作
var cav=document.getElementById("cav");//获取canvas对象
var ctx=cav.getContext("2d");//通过这个函数获取canvas的上下文
var width=parseInt(cav.getAttribute("width"));
var height=parseInt(cav.getAttribute("height"));
ctx.drawImage(this,0,0);//将图片“画到”canvas上去
var imageData=ctx.getImageData(0,0,width,height);//取得canvas的imageData,我们就是通过这个对canvas进行像素操作的
var data=imageData.data;
for(var i=0,length=data.length;i<length;i=i+4)//data里面每4个数据项代表一个像素
{
data[i]=255-data[i];//红
data[i+1]=255-data[i+1];//绿
data[i+2]=255-data[i+2];//蓝
}
ctx.putImageData(imageData,0,0);//把imageData再放回canvas
}
photo.src="canvas-women.jpg";
}
posted on 2010-12-10 21:20 Pola'ZeYu 阅读(2573) 评论(4) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库