canvas绘制爱心

Posted wangzhichao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas绘制爱心相关的知识,希望对你有一定的参考价值。

需求:绘制爱心图像轨迹。

实现:直接贴代码吧!

预览地址:https://codepen.io/wzc570738205/pen/dqqBpj

技术分享图片

 

<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title>模仿笔画</title>
    <style type="text/css">
        #_canvas {
            background-color: rgb(240, 240, 240);
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <canvas id="_canvas" width="500" height=500>sorry, your broswer does not support html5!</canvas>

    <script type="text/javascript">
        var canvas_ = document.getElementById("_canvas");
        var context = canvas_.getContext("2d");
        //线条设置
        context.strokeStyle = "red";
        context.lineWidth = 2;

        //线条数组
        var array_paint = [];

        //背景图
        var img = new Image()
        img.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fv5kg78i8kj30xc0m8ank.jpg"
        context.drawImage(img, 0, 0);

        function paint() {
            context.beginPath();
            context.moveTo(array_paint[0][0], array_paint[0][1]);
            if (array_paint.length == 1)
                context.lineTo(array_paint[0][0] + 1, array_paint[0][1] + 1);
            else {
                var i = 1;
                for (i in array_paint) {
                    context.lineTo(array_paint[i][0], array_paint[i][1]);
                    context.moveTo(array_paint[i][0], array_paint[i][1]);
                }

            }
            context.closePath();
            context.stroke();
        }

        let num = -1;
        let timer = null;
        let list = []
        //创建坐标
        list = heartShape(20, 50, 20)

        function people() {
            num++;
            var imgpeople = new Image()
            imgpeople.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fvcmafdhe6j305k05k3ye.jpg"
            context.drawImage(imgpeople, list[num].current_x * 500 / 100 - 10, list[num].current_y * 500 / 100 - 20, 20,
                20);
            context.clearRect(0, 0, screen.width, screen.height);
            context.drawImage(img, 0, 0);

            console.log(list[num].current_x * 500 / 100);
            if (num < list.length - 1) {
                let current_x = (Math.random() * 100).toFixed(2);
                let current_y = (Math.random() * 100).toFixed(2);
                array_paint.push([list[num].current_x * 500 / 100, list[num].current_y * 500 / 100]);
                paint();
                if (num > 0) {
                    context.drawImage(imgpeople, list[num].current_x * 500 / 100 - 10, list[num].current_y * 500 / 100 -
                        20, 20, 20);
                }
            } else {
                array_paint = [];
                for (var i = 0; i < list.length; i++) {
                    array_paint.push([list[i].current_x * 500 / 100, list[i].current_y * 500 / 100]);
                    paint();
                    context.drawImage(imgpeople, list[num].current_x * 500 / 100 - 10, list[num].current_y * 500 / 100 -
                        20, 20, 20);
                }
                clearInterval(timer);
            }

        }

        timer = setInterval(people, 50)

        function heartShape(r, dx, dy) { //r:大小;dx:水平偏移;dy:垂直偏移;c:颜色
            var m, n, x, y, i;
            let arr = [];
            for (i = 0; i <= 7.9; i += 0.04) {
                m = i;
                n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) +
                    2);
                x = n * Math.cos(m) + dx;
                y = n * Math.sin(m) + dy;
                arr.push({
                    current_x: x,
                    current_y: y
                })
            }
            return arr
        }
    </script>
</body>

</html>

 

 

 

 

以上是关于canvas绘制爱心的主要内容,如果未能解决你的问题,请参考以下文章

html5+canvas全屏的520爱心表白网页代码

关于慕课网上爱心小鱼的讲解

你还在用canvas画爱心吗?看我让你的名字在星空绽放

你还在用canvas画爱心吗?看我让你的名字在星空绽放

用代码写出浪漫__合集(pythonmatplotlibMatlabjava绘制爱心玫瑰花前端特效玫瑰爱心)

python-函数和代码复用—七段数码管绘制和爱心