html5 canvas图片渐变
生活随笔
收集整理的這篇文章主要介紹了
html5 canvas图片渐变
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/mayufo/p/4296362.html
總結(jié)
以上是生活随笔為你收集整理的html5 canvas图片渐变的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cocos数据篇[3.4](4) ——p
- 下一篇： Linux学习-01-安装虚拟机与lin