关灯
开启左侧

[网页制作] html5 更新图片颜色示例代码

[复制链接]
swmozowtfl 发表于 2015-7-10 22:26:26 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
代码如下:
<canvas id=c1 width=1220 height = 880 style=background: none repeat scroll 0% 0% transparent; ></canvas>
<script>
var cid = c1;
var image = new image();
image.src = eye/item_eye_1.png;
image.onload = function () {
recolorimage(cid,image, 0, 0, 0, 255, 0, 0);
}
function recolorimage(c,img, oldred, oldgreen, oldblue, newred, newgreen, newblue) {
var c = document.getelementbyid(c);
var ctx = c.getcontext(2d);
var w = img.width;
var h = img.height;
c.width = w;
c.height = h;
// draw the image on the temporary canvas
ctx.drawimage(img, 0, 0, w, h);
// pull the entire image into an array of pixel data
var imagedata = ctx.getimagedata(0, 0, w, h);
// examine every pixel,
// change any old rgb to the new-rgb
for (var i = 0; i < imagedata.data.length; i += 4) {
// is this pixel the old rgb?
if (imagedata.data == oldred && imagedata.data[i + 1] == oldgreen && imagedata.data[i + 2] == oldblue) {
// change to your new rgb
imagedata.data = newred;
imagedata.data[i + 1] = newgreen;
imagedata.data[i + 2] = newblue;
}
}
// put the altered data back on the canvas
ctx.putimagedata(imagedata, 0, 0);
}
</script>

更多网页制作信息请查看: 网页制作
 

精彩评论9

正序浏览
effoggikeftor 发表于 2015-12-16 09:58:55 | 显示全部楼层
 
看起来好~~像啊~~~~~
 
gevaemaidovef 发表于 2015-12-16 09:59:15 | 显示全部楼层
 
你这样的表现,就只配这几个字:窝囊废
 
tohme 发表于 2015-12-16 09:59:31 | 显示全部楼层
 
呵呵 放心 如我算错 你以后来砸我的帖子 呵呵
 
tohme 发表于 2015-12-16 09:59:55 | 显示全部楼层
 
现在做什么网站好?
 
seazvyt 发表于 2016-2-12 15:42:10 | 显示全部楼层
 
现在做什么网站好?
 
GoodyFouppy 发表于 2016-2-12 15:42:26 | 显示全部楼层
 
您知道这个论坛的站长是谁吗?偷偷的告诉你他叫叶学得  好厉害的样子
 
GoodyFouppy 发表于 2016-2-12 15:42:38 | 显示全部楼层
 
哈哈~` 好久没有笑喽~
 
Acropozelan 发表于 2016-2-12 15:42:58 | 显示全部楼层
 
因删贴不及时所产生的任何法律(书法,基本法,劳动法,婚姻法,输入法,国际法,今日说法,与台湾关系法及文中涉及或可能涉及以及未及之法,各地治安管理条例)纠纷或责任本人概不负责。
 
tohme 发表于 2016-2-12 15:43:00 | 显示全部楼层
 
本人在此留言均为网络上复制,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能。并不代表本人局部或全部同意、支持或者反对楼主观点。
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

1粉丝

2503帖子

热门图文
热门帖子
排行榜
作者专栏

关注我们:微信订阅号

官方微信

APP下载

全国服务Q Q:

956130084

中国·湖北

Email:956130084@qq.com

Copyright   ©2015-2022  站长技术交流论坛|互联网技术交流平台Powered by©Discuz!技术支持:得知网络  

鄂公网安备 42018502006730号

  ( 鄂ICP备15006301号-5 )