html5 canvas图片渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{var oc = document.getElementById('c1');var ogc = oc.getContext('2d');var yimg = new Image();yimg.onload = function (){draw(this);}yimg.src = 'img/5-5.jpg';function draw(obj){oc.width = obj.width;oc.height = obj.height*2;ogc.drawImage(obj,0,0);var oimg = ogc.getImageData(0,0,obj.width,obj.height);var w = oimg.width;var h = oimg.height;var newimg = ogc.createImageData(obj.width,obj.height);for(var i = 0; i < h; i++){for(var j = 0; j < w; j++){var color = getXY(oimg,j,i)var result = [];result[0] = 255 - color[0];result[1] = 255 - color[1];result[2] = 255 - color[2];result[3] = 255*i/h;
                setXY(newimg,j,h-i,result);}}ogc.putImageData(newimg,0,obj.height);}function getXY(obj,x,y){var w = obj.width;var h = obj.height;var d = obj.data;var color = [];color[0] = d[ 4*(y*w+x)];color[1] = d[ 4*(y*w+x) +1];color[2] = d[ 4*(y*w+x) +2];color[3] = d[ 4*(y*w+x) +3];return color;}function setXY(obj,x,y,color){var w = obj.width;var h = obj.height;var d = obj.data;d[ 4*(y*w+x)] = color[0];d[ 4*(y*w+x) +1] = color[1];d[ 4*(y*w+x) +2] = color[2];d[ 4*(y*w+x) +3] = color[3];}
}
</script>
<style>
body{background:pink;}
#c1{background:white;}
</style>
</head><body>
<canvas id="c1" width="400" height="800"></canvas>
</body>
</html>

转载于:https://www.cnblogs.com/mayufo/p/4296362.html

html5 canvas图片渐变相关推荐

HTML5 Canvas图片马赛克模糊动画
经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果.在演示中我们可以拖动滑竿来设置马赛克模糊的程度,你可以在不同的值下观察图片 ...
html5 canvas 图片移动端,支持移动端的HTML5 Canvas逼真黑板特效
插件描述:这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动端,它能模拟使用粉笔在黑板上写字的效果. 这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动 ...
html5 canvas图片缩放，拖拽
想用html5 canvas来实现地图功能主要是想把地图功能集合在系统中,而不是使用类似geoserver等发布,相当于两套系统了.地图是室内地图,所以高德百度什么的没用.我的理想情况是丢一副矢量图 ...
HTML5 canvas图片爆炸特效
这是一款基于html5 canvas的炫酷图片爆炸飞散特效js插件.该js插件当用鼠标点击图片时,图片会有玻璃窗被子弹击碎时的爆炸飞散效果,非常炫酷. 在线演示:http://www.htmleaf. ...
html5 Canvas颜色渐变（画图很重要）
如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color stroke ...
html5 图片局部马赛克,html5 canvas 图片打马赛克 demo
Canvas Mosaic #pic{ display:none; } The size of the original pic need to be 360 pixs. canvas 标签 var ...
html5 canvas 图片变形,HTML5/Canvas 流动的变形圆形
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 /** * inspired by: * Rectangle World * http://rectangl ...
html真实雾效果图,HTML5 Canvas图片上云雾弥漫驱散特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const front = document.getElementById("front" ...
9个非常有趣的HTML5 Canvas动画特效合集
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

html5 canvas图片渐变

html5 canvas图片渐变相关推荐

最新文章

热门文章