html中图片为什么反了,HTML5 canvas如何实现图片反色

本篇教程探讨了HTML5 canvas如何实现图片反色，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

html>

无标题文档

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;

for(var i = 0; i 

{

for(var j = 0; 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;

setXY(oimg,j,i,result);

}

}

ogc.putImageData(oimg,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];

}

}

body{

background:pink;

}

#c1{

background:white;

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！