【坑】【实例】【未解决】html5-canvas中实现图片的浮雕效
2015-08-30 20:31
746 查看
在线演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #canvas { border: thin black solid; } </style> </head> <body> <canvas id="canvas" width="800" height="600"></canvas> <input type="button" name="show" id="show" value="浮雕效果" onclick="show()" /> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src = "48091305.jpg"; context.drawImage(image, 0, 0); function show() { var imagedata, data, length, width; imagedata = context.getImageData(0, 0, canvas.width, canvas.height); data = imagedata.data; width = imagedata.width; length = data.length; for(var i = 0; i < length; i++) { //判断是否处在最后一行 if(i <= length - width * 4) { //跳过Alpha属性 if((i+1) % 4 !== 0) { //判断是否在每行的最后一个像素,不清楚为什么要添加这个判断 if((i+4) % (width*4) == 0) { data[i] = data[i-4]; data[i+1] = data[i-3]; data[i+2] = data[i-2]; data[i+3] = data[i-1]; i += 4; //?这里也不清楚,加没加好像也一样 } else { //?请问这里为什么要这样写 data[i] = 255/2 + 2*data[i] - data[i+4] - data[i+width*4]; //在网上还有一种说法叫做 //基于当前像素的前一个像素RGB值与它的后一个像素的RGB值之差再加上128 //与本例中的又有什么区别呢? } } } else { //最后一行的情况 //跳过Alpha属性 if((i+1) % 4 !== 0) { //当前像素等于他的上一行像素?为什么要这样写 data[i] = data[i-width*4]; } } } context.putImageData(imagedata, 0, 0); }; </script> </html>
相关文章推荐
- h5页面-2
- h5页面-1
- html5 file upload and form data by ajax
- Html5 Blob
- 20150830 H5 敏捷实践
- html5--如何用canvas画一个钟
- HTML5 Canvas烟花特效 场景十分华丽
- HTML5列表、块和布局
- html5表单和伪类
- HTML5 元素拖放
- H5中form表单中新增属性
- 基于CDH5.4的Spark1.4.1下SparkR的部署
- input中加入图片的做法
- html5中canvas 错误集锦1(8.28)
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
- 手机上实现图片旋转
- html5压缩图片并上传
- HTML5中Canvas画线技巧大全
- 利用canvas的rotate创建一个简易的风车动画
- ionic结合HTML5实现打电话功能