canvas绘制爱心的几种方法

最新推荐文章于 2024-04-09 07:58:38 发布

「已注销」

最新推荐文章于 2024-04-09 07:58:38 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： canvas

原文链接：https://www.mk2048.com/blog/blog.php?id=hb1bjbb0bbab&title=canvas%E7%BB%98%E5%88%B6%E7%88%B1%E5%BF%83%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95

版权

前端专栏收录该内容

182 篇文章 0 订阅

订阅专栏

第一种方法：桃心形公式

代码实现的一种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用桃心形方程绘制爱心</title>
</head>
<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var Heart = function(ctx, x, y, a) {
            this.ctx = ctx;
            this.x = x;
            this.y = y;
            this.a = a;
            this.vertices = [];
            for(let i=0; i<50; i  ) {
                var step = i/50*(Math.PI*2);//设置心上面两点之间的角度，具体分成多少份，好像需要去试。
                var vector = {
                    x : this.a*(16 * Math.pow(Math.sin(step), 3)),
                    y : this.a*(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() {
            this.ctx.beginPath();
            this.ctx.translate(this.x,this.y);
            this.ctx.rotate(Math.PI);
            for(let i=0; i<50; i  ) {
                var vector = this.vertices[i];
                this.ctx.lineTo(vector.x, vector.y);
            }
            this.ctx.fillStyle = "red";
            this.ctx.fill();
        }
        canvas.onmousedown = function(e) {
            var x = e.offsetX;
            var y = e.offsetY;
            var a = 6;
            var heart = new Heart(ctx, x, y, a);
            heart.draw();
        }
    </script>
</body>
</html>

第二种方法：笛卡尔的心形线

代码实现的一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用笛卡尔心形线方程绘制爱心</title>
</head>
<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        function Heart(ctx, x, y, a) {
            this.ctx = ctx;
            this.x = x;
            this.y = y;
            this.a = a;
            this.draw = function() {
                this.ctx.beginPath();
                this.ctx.translate(this.x, this.y);
                this.ctx.rotate(Math.PI);
                var start = 0;
                for(var i=0; i<500; i  ) {
                    start  = Math.PI*2/500;
                    var end = start Math.PI*2/500;
                    var r = this.a*(1-Math.sin(start));
                    ctx.arc(0, 0, r, start, end, false);
                }
                ctx.fillStyle = "red";
                ctx.fill();
            }
        }
        canvas.onmousedown = function(e) {
            var x = e.offsetX;
            var y = e.offsetY;
            var a = 60;
            var heart = new Heart(ctx, x, y, a);
            heart.draw();
        }
    </script>
</body>
</html>