Exemple de mise en œuvre de l'effet kaléidoscope sur toile-tutoriel CSS-php.cn

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

高洛峰

Libérer： 2017-03-04 10:06:16

original

1485 Les gens l'ont consulté

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>

Copier après la connexion

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 !