Maison > Article > interface Web > Exemple de mise en œuvre de l'effet kaléidoscope sur toile

Exemple de mise en œuvre de l'effet kaléidoscope sur toile

高洛峰original: 2017-03-04 10:06:161486parcourir

Canvas a également la fonction de transformation de transformation en CSS3. La méthode d'opération sous-jacente de transformation consiste à utiliser la matrice en algèbre linéaire, et la matrice est souvent utilisée dans notre pratique quotidienne. Elle peut présenter des problèmes spatiaux complexes. Il y a encore beaucoup d'aspects pratiques, et les personnes qui ne le comprennent pas auront du mal à s'y plonger, cette connaissance est indispensable.

Les fonctions de transformation encapsulées dans canvas : scale(), rotate(), translate(), transform(), setTransform(); et elles n'ont besoin que de transmettre des nombres, et l'unité ne le fait pas. doivent être transmis. De plus, l'unité d'angle ici est le radian. Ce sont les différences par rapport à css transform() et setTransform(); >

vous éliminez Ces fonctions, en d'autres termes, setTransform() vous permettent de redimensionner, faire pivoter, déplacer et incliner l'environnement actuel.

Pour savoir comment l'utiliser, consultez le manuel du w3c.

Rendu suivant :

Exemple de mise en œuvre de leffet kaléidoscope sur toile

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
    body{   
        background: #eee;   
    }   
    canvas{   
        background: #fff;   
    }   
    </style>
</head>
<body>
    <canvas width="800" height="800"></canvas>
    <script>
    var oCas=document.getElementsByTagName("canvas")[0];   
    var cas=oCas.getContext("2d");   
    var arr=[];   

    /*绘制数据内容*/   
    setInterval(function(){   
        cas.clearRect(0,0,800,800);   
        for(var i=0;i<arr.length;i++){   
            cas.save();   
            cas.beginPath();   
            cas.translate(400,400);   
            cas.rotate(arr[i].num*Math.PI/180);   
            cas.scale(arr[i].num2,arr[i].num2);   
            cas.fillStyle=arr[i].color;   
            cas.rect(arr[i].num1,0,20,20);   
            cas.fill();   
            cas.restore();   
            if(arr[i].num1<=0){   
                arr.splice(i,1);   
            }else{   
                arr[i].num++;   
                arr[i].num2-=0.0015;   
                arr[i].num1-=0.4;   
            }   
        }   
    },60);   

    /*存储数据*/   
    setInterval(function(){   
        var obj={   
            "num":0,   
            "num1":300,   
            "num2":1,   
            "color":"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"   
        };   
        arr.push(obj);   
    },1000);   

    </script>
</body>
</html>

Si vous souhaitez générer plusieurs graphiques, vous pouvez d'abord utiliser un tableau pour stocker les données, puis boucler pour dessiner le contenu des données, et enfin effacer le canevas une fois la boucle de données terminée, et ajoutez la valeur de transformation Change, afin que vous puissiez obtenir l'effet d'animation.

L'implémentation simple ci-dessus de l'effet kaléidoscope de Canvas (recommandé) est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour plus d'exemples d'implémentation de l'effet kaléidoscope sur toile, veuillez faire attention au site Web PHP 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：Implémentation détaillée de la conception de l'interface du menu de navigation à commutation d'une seule page CSS3Article suivant：Implémentation détaillée de la conception de l'interface du menu de navigation à commutation d'une seule page CSS3

Articles Liés

Voir plus