Question

非常多的帖子，如果我将问题的格式设置错误，我深表歉意。

在进行此项目之前，我曾有过使用画布为多个圆圈设置动画的经验，但目前正在尝试为自定义字母Z设置动画。

当前正在尝试使100个Z进行相同的操作，由于某种原因，我的构造函数对象仅绘制了一个。

到目前为止，我有：

控制台登录了我的draw函数，以查看它是否走了这么远
控制台记录了Z个对象的数组，所有100个都在那里。
在该对象数组中，我检查了所有对象的x坐标，并且它们都不相同，所以我认为所有100个对象都不位于彼此的上方。

我怀疑更新功能在我使用“ this”时有多大错误

我想生病只是将我的整个javascript文件转储以防万一。抱歉，我不知道典型的协议。

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

canvasHeight = canvas.height;

canvasWidth = canvas.width

var dx = 0 
var dy = 0;
var direction = true

function Z(xCoord, yCoord, dx, dy, direction) {
    this.x = xCoord  
    this.y = yCoord    
    this.dy = dy    
    this.dx = dx    
    this.direction = direction


    this.update = function(){
        //making the Z wiggle
        if (this.dx < 20 && this.direction) {
            this.dx++
        }
        else if (this.dx === 20 && this.direction) {
            this.direction = false;
        }

        if (this.dx > -20 && !this.direction) {
            this.dx--
        }
        else if (this.dx === -20 && !this.direction)  {
            this.direction = true;
        }

        //if Z gets to top of page it resets down at the bottom
        if (this.dy === -canvasHeight - this.y) {
            this.dy = 0
        }

        this.dy--;
        this.draw()
    }

    this.draw = function() {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        context.translate(this.dx, this.dy); /// translate (move)

        //The Letter Z
        context.beginPath();

        context.moveTo(this.x, this.y + canvasHeight); // x+0
        context.lineTo(this.x+10, this.y + canvasHeight); // x+10
        context.lineTo(this.x+2, this.y + canvasHeight-9); // x+2
        context.lineTo(this.x+5, this.y + canvasHeight-9); // x+5
        context.lineTo(this.x+10, this.y + canvasHeight-9); // x+10
        context.lineTo(this.x+10, this.y + canvasHeight-10); // x+10
        context.lineTo(this.x, this.y + canvasHeight-10); // x+0
        context.lineTo(this.x+8, this.y + canvasHeight-1); // x+8
        context.lineTo(this.x, this.y + canvasHeight-1); // x+0
        context.lineTo(this.x, this.y + canvasHeight);  // x+0

        // complete custom shape
        context.closePath();
        context.lineWidth = 4;
        context.fillStyle = 'white';
        context.fill();
        context.strokeStyle = 'black';
        context.stroke();

        context.translate(-this.dx, -this.dy); /// translate (move)


    }

}

var ZArr = []
//for loop to make all the Z's
for (var index = 0; index < 100; index++) {

    var randomX = Math.random() * canvasWidth;
    var randomY = Math.floor(Math.random() * 500) + 1  

    var newZ = new Z(randomX, randomY, dx, dy, direction);

    ZArr.push(newZ)
}

// console.log(ZArr)

function executeFrame() {

    for (let index = 0; index < ZArr.length; index++) {
        ZArr[index].update();  
    }

    requestAnimationFrame(executeFrame);
}

//start animation
executeFrame();

Answer 1

将function executeFrame() { context.clearRect(0, 0, context.canvas.width, context.canvas.height); for (let index = 0; index < ZArr.length; index++) { ZArr[index].update(); } requestAnimationFrame(executeFrame); }移动到渲染循环。您可以擦除数组的每个循环中的每个图形。

<#
    This command outputs the top-most parent of the current folder.

    If the current folder is not under svn revision control,
    it will recurse up one level, and try again.

    It stops at the root folder on the current drive.
    If the current folder's drive's root folder is not under svn revision control,
    it will throw an exception "No SVN Root Directory found."
#>
function Get-SvnRootDirectory {
    $currentDirectory = Get-Location

    do {
        $output = $(svn info $currentDirectory 2> $null)
        $output = $output | findstr /C:"Working Copy Root Path:"
        if ($LASTEXITCODE -eq 0)
        {
            break;
        }
        # if (Test-Path -PathType Container -Path $currentDirectory)
        # {
        #     throw "No SVN Root Directory found."
        # }
        $currentDirectory = Split-Path -Path $currentDirectory -Parent
        if ([string]::IsNullOrWhiteSpace($currentDirectory))
        {
            throw "No SVN Root Directory found."
        }
    }
    while ($true)

    $output -match "Working Copy Root Path: (?<Group>.*)$" | Out-Null
    return $Matches.Group
}

Answer 2

这是因为您的透明画布行位于Z对象的draw函数中，因此，每次尝试绘制新的Z时都会清除该字段。这意味着只有数组中的最后一个可见。只需移动此行即可。

context.clearRect(0, 0, context.canvas.width, context.canvas.height);

到for循环上方的executeFrame函数。

祝你好运！

在html5画布中对多个自定义形状进行动画处理

2 个答案: