Maison  >  Article  >  interface Web  >  Changement de couleur de l'image dessinée sur un élément de canevas HTML5

Changement de couleur de l'image dessinée sur un élément de canevas HTML5

WBOY
WBOYavant
2023-09-03 16:29:09609parcourir

Changement de couleur de limage dessinée sur un élément de canevas HTML5

Afin de changer la couleur de l'image dessinée sur l'élément HTML5 Canvas, vous pouvez essayer d'exécuter le code suivant. Utilisez la méthode drawImage() -

function display(img1, red, gr, bl) { //func to change color of image    
var canvas1 = document.createElement('canvas');//canvas element initialisation

canvas1.width = img.width;//canvas width initialisation    
canvas1.height = img.height; //canvas height initialisation

var ctx1 = canvas1.getContext('2d');    
ctx1.drawImage(img, 0, 0);

var myImg =ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
for (var t=0;t< myImg.data.length;t+=4) {        
   myImg.data[t]= red | myImg.data[t];        
   myImg.data[t+1]= gr | myImg.data[t+1];        
   myImg.data[t+2]= bl | myImg.data[t+2];    
}
ctx1.putImageData(myImg,0,0); // Image data is adjusted according to context    
return c;
},

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer