个人中心
gpt4 book ai didi

javascript - 如何在 Canvas 中的形状后面创建轨迹？

转载 作者：行者123 更新时间：2023-12-03 05:28:04 24 4
gpt4 key购买 nike

现在我有一些形状(我只包括三 Angular 形，因为它们都是以相同的方式生成的)，这些形状是在用户旋转鼠标滚轮时生成的。我想在慢慢消失的形状后面留下一条痕迹。我环顾四周并尝试了几种不同的方法，但似乎都无法使它们发挥作用。代码如下:

<html>
<head>
<script>
    var canvas;
    var context;
    var triangles = [];
    var timer;

    function init() {
        canvas = document.getElementById('canvas');
        context = canvas.getContext("2d");
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas, false);
        window.addEventListener('orientationchange', resizeCanvas, false);
        canvas.onwheel = function(event) {
            handleClick(event.clientX, event.clientY);
        };
        var timer = setInterval(resizeCanvas, 30);
    }

    function Triangle(x,y,triangleColor) {
            this.x = x;
            this.y = y;
            this.triangleColor = triangleColor;

            this.vx = Math.random() * 30 - 15;
            this.vy = Math.random() * 30 - 15;
            this.time = 100;
    }

function handleClick(x,y) {
        var colors = [[0,170,255], [230,180,125], [50,205,130]];
        var triangleColor = colors[Math.floor(Math.random()*colors.length)];
        triangles.push(new Triangle(x,y,triangleColor));
        for (var i=0; i<triangles.length; i++) {
            drawTriangle(triangles[i]);
        }
}

function drawTriangle(triangle) {
            context.beginPath();
            context.moveTo(triangle.x,triangle.y); 
            context.lineTo(triangle.x+25,triangle.y+25);
            context.lineTo(triangle.x+25,triangle.y-25);
            var c = triangle.triangleColor
            context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (triangle.time / 100) + ')';
            context.fill();
}

function resizeCanvas() {
        canvas.width = window.innerWidth-20;
        canvas.height = window.innerHeight-20;
        fillBackgroundColor();
        for (var i=0; i<triangles.length; i++) {
            var t = triangles[i];
            drawTriangle(t);

            if (t.x + t.vx > canvas.width || t.x + t.vx < 0)
                t.vx = -t.vx
            if (t.y + t.vy > canvas.height || t.y + t.vy < 0)
                t.vy = -t.vy
            if (t.time === 0) {
                triangles.splice(i,1);
            }

            t.time -= 1;
            t.x += t.vx;
            t.y += t.vy;
        }
}

function fillBackgroundColor() {
    context.fillStyle = "black";
    context.fillRect(0,0,canvas.width,canvas.height);
}

    window.onload = init;
</script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

最佳答案

我设法做到这一点的方法是存储对象过去的位置(例如 10 个过去的位置，并从一个到下一个绘制线条。

1.将数组 PastX 和 PastY 添加到三 Angular 形对象。

this.pastX = [];
this.pastY = [];

2.每个刻度将每个元素进一步放置 1 个位置，并将当前位置添加为第一个位置。

在更新三 Angular 形位置之前

    for(var k = t.pastX.length; k > 0; k--){
        if(k < 10){
        t.pastX[k] = pastX[k-1];
        t.pastY[k] = pastY[k-1];
        }
     t.pastX[0] = t.x;
     t.pastY[0] = t.y;

  • 像这样在它们之间画线(从0到1，从1到2等等)；

    for(var k = 0; k < t.pastX.length - 1; k++){//从pastX[k]、pastY[k]到pastX[k + 1]、pastY[k + 1]画线}

    • 希望对你有帮助。

    关于javascript - 如何在 Canvas 中的形状后面创建轨迹？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41074644/

    24 4 0
    文章推荐： javascript - 如何使用 Angular.js 从 API 的下拉列表中选择特定数据来显示相关数据？
    文章推荐： 使用之前的估计值重新启动混合效应模型估计
    文章推荐： instagram-api - 检索超过 150 条 Instagram 评论
    文章推荐： javascript - Licode:ICE 检查成功后发布流失败
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com