利用canvas绘制爱心

需求：绘制爱心图像轨迹。
实现：直接贴代码吧！
预览地址：绘制爱心图像轨迹
<!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:垂直偏移;
            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绘制爱心

雾岛听风

引用和评论

前端开发技巧：如何定位调试鼠标Hover效果后消失的元素

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号
