zoukankan      html  css  js  c++  java
  • canvas绘制爱心

    欢迎加入前端交流群交流知识获取视频资料:749539640

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

    实现:直接贴代码吧!

    预览地址: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>

  • 相关阅读:
    .net注册iis
    hdu 1081To The Max
    hdu 1312Red and Black
    hdu 1016Prime Ring Problem
    hdu 1159Common Subsequence
    hdu 1372Knight Moves
    hdu 1686Oulipo
    hdu 1241Oil Deposits
    hdu 1171Big Event in HDU
    hdu 4006The kth great number
  • 原文地址:https://www.cnblogs.com/wangzhichao/p/9662842.html
Copyright © 2011-2022 走看看