Maison > Article > interface Web > Décrire Canvas combiné avec JavaScript pour obtenir des effets spéciaux d'image

Décrire Canvas combiné avec JavaScript pour obtenir des effets spéciaux d'image

韦小宝original: 2018-03-07 16:49:052481parcourir

Nous savons tous que Canvas est en HTML5. Canvas peut créer de nombreux effets spéciaux et autres choses magiques. Bien sûr, JavaScript peut également être utilisé, mais Canvas est combiné avec JavaScript pour obtenir une image spéciale. effets pour vous Y avez-vous joué ? Sinon, jetons un oeil !

Jetez d'abord un œil à la comparaison de l'image source et de l'effet de particules converti :

Décrire Canvas combiné avec JavaScript pour obtenir des effets spéciaux dimage

L'image sur la gauche est l'image source, l'image de droite est l'image de l'effet de particules. L'effet est créé sur la toile Canvas. Créer des effets de particules à partir d'images est relativement simple. Concentrez-vous simplement sur la compréhension de deux points de connaissance

1. L'image est dessinée sur le canevas sous la forme d'un objet image, puis l'interface getImageData de Canvas est utilisée pour obtenir les informations sur les pixels de l'image.

var imageData=ctx.getImageData(x, y, width, height);

Description du paramètre : x, y sont les coordonnées x et y sur le canevas

largeur, hauteur sont les informations pour obtenir l'image de la zone spécifiée

Description de la valeur de retour : imageData est la valeur de retour, qui est un objet contenant trois attributs

imageData={
    data:Unit8ClampedArray[10000] //一个包含图片区域内每个像素点的RGBA的整型数据信息
    height:200   //读取的图片像素信息区域高度
    width:200 　　//读取的图片像素信息区域宽度
}

2. Comprendre la description de la disposition des données de zone de pixels, la. les données d'image obtenues ci-dessus Les informations sur les pixels (attribut data dans l'objet imageData) sont des tableau unidimensionnel données de type entier RGBA. Un pixel est composé de 4 valeurs (R, V, B, A). En d’autres termes, tous les quatre pixels des informations du tableau. Par conséquent, il existe les règles suivantes,

La première information de pixel est : RGBA(data[0],data[1],data[2],data[3])

La seconde un Les informations sur les pixels sont : RGBA(data[4],data[5],data[6],data[7])

.....

Les informations sur le Nième pixel sont : RGBA(données[(n-1)*4],données[(n-1)*4+1],données[(n-1)*4+2],données[(n-1)*4+ 3 ])

.....

De plus, puisque la zone de pixels est une zone, elle a une largeur et une hauteur. La formule de calcul ci-dessus peut être utilisée sur une seule ligne pour localiser un pixel. Par conséquent, lors du calcul des pixels, le positionnement dans toute la zone de l'image doit être pris en compte :

La figure ci-dessus est un exemple. La largeur et la hauteur de l'image sont toutes deux de 200, si chaque pixel est divisé en une ligne et une colonne. L’image comporte alors 200 lignes et 200 colonnes. Par conséquent, pour obtenir les informations de position initiale du pixel dans la ligne i et la colonne j, il faut :

var pos =[( i-1 )*200]+( j-1 )]*4;

où i dans la formule représente le nombre de lignes et j représente le nombre de colonnes. 200 est la largeur de l'image.

Code démo :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="background:#000">浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    var image = new Image();
    image.src=&#39;/WebWorkspace/EchartDemo/images/star.png&#39;;
    var pixels=[];  //存储像素数据
    var imageData;
    image.onload=function(){
        ctx.drawImage(image,200,100,200,200);
        imageData=ctx.getImageData(200,100,200,200);    //获取图表像素信息
        getPixels();    //获取所有像素
        drawPic();  //绘制图像
    };
    function getPixels(){
        var pos=0;
        var data=imageData.data;    //RGBA的一维数组数据
        //源图像的高度和宽度为200px
        for(var i=1;i<=200;i++){
            for(var j=1;j<=200;j++){
                pos=[(i-1)*200+(j-1)]*4; //取得像素位置
                if(data[pos]>=0){
                    var pixel={
                        x:200+j+Math.random()*20, //重新设置每个像素的位置信息
                        y:100+i+Math.random()*20, //重新设置每个像素的位置信息
                        fillStyle:&#39;rgba(&#39;+data[pos]+&#39;,&#39;+(data[pos+1])+&#39;,&#39;+(data[pos+2])+&#39;,&#39;+(data[pos+3])+&#39;)&#39;
                    }
                    pixels.push(pixel);
                }
            }
        }
    }
    function drawPic(){
        var canvas=document.getElementById("myCanvas");
        var ctx=canvas.getContext("2d");
        ctx.clearRect(0,0,600,400);
        var len=pixels.length,curr_pixel=null;
        for(var i=0;i<len;i++){
            curr_pixel=pixels[i];
            ctx.fillStyle=curr_pixel.fillStyle;
            ctx.fillRect(curr_pixel.x,curr_pixel.y,1,1);
        }
    }
</script>
</html>

Si vous ne comprenez pas ce qui précède, exécutez-le avec le code et essayez de le comprendre. N'oubliez pas de changer l'adresse de l'image ! Sinon, une erreur sera signalée

Lecture similaire :

Comment utiliser Canvas pour traiter des images

La toile permet d'obtenir des effets de mouvement de particules éblouissants

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：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des fichiers de mappage HibernateArticle suivant：Explication détaillée des fichiers de mappage Hibernate

Articles Liés

Voir plus