代码如下:* T6 H7 Q! U: U9 P, s# Q& V
<canvas id=c1 width=1220 height = 880 style=background: none repeat scroll 0% 0% transparent; ></canvas> ; w' G3 b/ |" x. {3 g) q/ E
<script> ( j0 n9 A2 r' c$ C5 q
var cid = c1;
' J8 H% [. ^# A" k v. M. M! G7 Nvar image = new image(); 4 p- f* r0 e$ _8 B6 P
image.src = eye/item_eye_1.png; * q0 q! ]' I; ~8 O# d' ?3 g9 K. |
image.onload = function () {
+ _3 s' p7 {6 zrecolorimage(cid,image, 0, 0, 0, 255, 0, 0);
& h& j' k4 o6 H7 c) r, b}
& N6 D: j. n) q X! q& i- z4 ^- Qfunction recolorimage(c,img, oldred, oldgreen, oldblue, newred, newgreen, newblue) {
: S0 Z0 H' S ^2 cvar c = document.getelementbyid(c); 1 h9 ^* ?" K3 K& j7 j( Z- \, v }
var ctx = c.getcontext(2d); ( ^- y$ F& n' m4 {" e
var w = img.width;
1 u0 t- `1 q$ K& z2 ivar h = img.height;
/ n0 M# m0 k* J& Yc.width = w; 9 ?; F Z9 H; [. d$ ?/ s
c.height = h;
. ^+ j* j4 s$ V; ]. b// draw the image on the temporary canvas & s2 q. j3 D \" ^, |* c5 z( ^6 Y& O
ctx.drawimage(img, 0, 0, w, h); ' n' Z: l5 H, @9 f
// pull the entire image into an array of pixel data
- @0 R- U& x( t( w/ o" svar imagedata = ctx.getimagedata(0, 0, w, h); 4 K F5 j4 L2 P, i2 F+ }$ ~) |
// examine every pixel, ) ~# F, C* `8 \1 h! T" F1 Z V
// change any old rgb to the new-rgb 2 ~) V- f* j9 h& u; ^! [" h' T# E3 c
for (var i = 0; i < imagedata.data.length; i += 4) { 0 `' e" I2 a4 p6 K3 P4 Y
// is this pixel the old rgb? ' v7 `; ` W* g2 h
if (imagedata.data == oldred && imagedata.data[i + 1] == oldgreen && imagedata.data[i + 2] == oldblue) {
$ w% C6 F3 i7 N4 U4 v+ ~# Z// change to your new rgb
* W$ D" z0 b# W4 H) f7 |& A# wimagedata.data = newred;
, ]+ B o9 C* S7 t, O0 \imagedata.data[i + 1] = newgreen; 6 Y' ~" C: x6 J: D
imagedata.data[i + 2] = newblue; " \( i0 a1 p9 U! u
}
# `; Z1 `5 w2 d- l}
k8 i8 h( E8 ?8 z$ G// put the altered data back on the canvas 4 @+ Z5 z2 K& \9 U' D4 J3 _* [9 W; d
ctx.putimagedata(imagedata, 0, 0);
2 |9 v6 V* @" ^2 j/ @' J} 1 C1 p9 o) l0 P% I4 {# {9 O4 j" s# w
</script> ! |: n5 k; E1 ?9 I: f$ R
, t9 {. G7 B0 V) n( y2 W5 s% {, s( @9 L
更多网页制作信息请查看: 网页制作 |