Maison >interface Web >Tutoriel H5 >Exemple de comment dessiner des cœurs sur une toile HTML5

Exemple de comment dessiner des cœurs sur une toile HTML5

黄舟original: 2017-10-31 10:35:086195parcourir

La première méthode

Exemple de comment dessiner des cœurs sur une toile HTML5
Une méthode d'implémentation de code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用桃心形方程绘制爱心</title>
</head>
<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector(&#39;canvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var Heart = function(x, y) {
            this.x = x;
            this.y = y;
            this.vertices = [];
            for(let i=0; i<30; i++) {
                var step = i / 30 * (Math.PI * 2);//设置心上面两点之间的角度，具体分成多少份，好像需要去试。
                var vector = {
                    x : (15 * Math.pow(Math.sin(step), 3)),
                    y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
                }
                this.vertices.push(vector);
            }
        }
        Heart.prototype.draw = function() {
            ctx.translate(-1000,this.y);//这一步跟ctx.shadowOffsetX必须一起使用，不明白为啥？
            ctx.beginPath();
            for(let i=0; i<30; i++) {
                var vector = this.vertices[i];
                ctx.lineTo(vector.x, vector.y);
            }
            ctx.shadowColor = "red";
            ctx.shadowOffsetX = this.x+1000;
            ctx.fill();
        }
        canvas.onmousedown = function(e) {
            var x = e.offsetX;
            var y = e.offsetY;
            var heart = new Heart(x, y);
            heart.draw();
        }
    </script>
</body>
</html>

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：Html5 Doudizhu échecs et configuration des cartes Canvas pour réaliser l'analyse du code du jeu DoudizhuArticle suivant：Html5 Doudizhu échecs et configuration des cartes Canvas pour réaliser l'analyse du code du jeu Doudizhu

Articles Liés

Voir plus