代码如下:, s+ i5 `7 p$ x# \( K& I
<canvas id=c1 width=1220 height = 880 style=background: none repeat scroll 0% 0% transparent; ></canvas> $ Q- B; J0 u4 f5 U. H
<script>
" ^1 Y7 |% ^( V2 Q, Avar cid = c1; 8 K- z' C- Z* z# f
var image = new image();
5 k) t& J. I w$ P% {image.src = eye/item_eye_1.png; " {1 p) p0 t# {! x. Z$ ]( |& z! S
image.onload = function () {
3 E1 D- K3 T; |7 X/ Y( s, Erecolorimage(cid,image, 0, 0, 0, 255, 0, 0);
$ M) a& N( {: V" V} + n% v2 {6 S S; Y. d
function recolorimage(c,img, oldred, oldgreen, oldblue, newred, newgreen, newblue) {
* y: e# c6 G. Wvar c = document.getelementbyid(c); {0 }# J6 d! ^. {' |
var ctx = c.getcontext(2d);
! C0 t1 \" x8 k# z, t& Rvar w = img.width; ) v) c9 T2 J+ p0 d2 n
var h = img.height;
9 E( X1 k/ ~& D* b( w% F4 Fc.width = w; ! b0 x- d$ P& a9 r2 d; t
c.height = h;
! {3 E8 U6 |, T8 a- f// draw the image on the temporary canvas & Z$ y, v$ B' ~9 @+ n8 u
ctx.drawimage(img, 0, 0, w, h); $ S: E _9 |& g, |/ H
// pull the entire image into an array of pixel data - |0 N& y3 O+ E- X6 ^) q
var imagedata = ctx.getimagedata(0, 0, w, h);
2 h( ?7 K5 g+ Z- D: ^- s& @. [// examine every pixel,
) N2 Y; Q0 I; G5 d( p. Z; B+ {// change any old rgb to the new-rgb
& N' D: y2 G+ r! {for (var i = 0; i < imagedata.data.length; i += 4) { + B+ P$ V- m4 H8 e$ K4 I
// is this pixel the old rgb?
, m5 q) c/ t" K1 b2 Hif (imagedata.data == oldred && imagedata.data[i + 1] == oldgreen && imagedata.data[i + 2] == oldblue) { / l( \" E% X7 l( B: G+ ]& M
// change to your new rgb . {# ?* n& A1 Z5 s2 }( w6 |
imagedata.data = newred; 8 j8 p9 R7 v, v s4 T
imagedata.data[i + 1] = newgreen; * T! C* t9 {, ^9 a
imagedata.data[i + 2] = newblue; ; m t! h. L. b- j+ n
} / G2 I* H3 p% G2 T3 J @! G# E8 n' r
}
0 ^, k% u, n' y! c8 h3 I// put the altered data back on the canvas 0 Q% J" A' a1 T/ G, S" J
ctx.putimagedata(imagedata, 0, 0);
/ P# Y. ~0 P$ a4 t. Q h% \}
) F3 _% v% `' y3 | r& o5 Z</script> , o" I8 X7 B: g- k) o
8 K% a: v3 H. L' O! b y
更多网页制作信息请查看: 网页制作 |