canvas实现三维树叶堆叠爱心表白动画效果代码-html代码-BFW代码库

canvas实现三维树叶堆叠爱心表白动画效果代码

代码语言：html

所属分类：表白

代码描述：canvas数显三维树叶堆叠爱心表白动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: #C7A;
}

canvas {
    z-index: -1;
    position: absolute;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

.panel {
    width: 300px;
    height: 400px;
    background: #FFFE;
    border-radius: 7px;
    box-shadow: -2px 4px 40px 3px #3334;
    border: 1px solid #333;
}
</style>




</head>

<body>
  <canvas></canvas>

  
      <script >
function multiplyMatrices(m1, m2) {
    var result = [];
    for(let i = 0; i < m1.length; i++) {
        result[i] = []
        for (var j = 0; j < m2[0].length; j++) {
            var sum = 0;
            for (var k = 0; k < m1[0].length; k++) {
                sum += m1[i][k] * m2[k][j];
            }
            result[i][j] = sum;
        }
    }
    return result;
}

class Point {
    constructor(x, y, z) {
        this.x = x
        this.y = y
        this.z = z
    }
    
    toArray() {
        return [this.x, this.y, this.z]
    }
    
    perspective() {
        const d = 500
        const z = 1/(d-this.z)
        const projection = [
            [z, 0, 0],
            [0, z, 0],
            [0,0,0]
        ]

        const [res] = multiplyMatrices([this.toArray()], projection)
        return new Point(res[0]*d, res[1]*d, this.z)
    }
    
    project(ctx, next) {
        const p = this.perspective(this.points)
        // ctx.beginPath()
        ctx.fillStyle = "#00000022"
        ctx.strokeStyle = "#000"
        ctx.lineWidth = .4
        ctx.moveTo(0, 0)
        ctx.lineTo(p.x, p.y)
        // // const r = p.z < 0 ? 2 : p.z/20 < 2 ? 2 : p.z/20
        // ctx.arc(p.x, p.y, 4, 0, Math.PI*2)
        // ctx.fill()
        // ctx.stroke()
    }
    
    rotate(matrix) {
        const [r] = multiplyMatrices([this.toArray()], matrix)
        this.x = r[0]
        this.y = r[1]
        this.z = r[2]
    }
}


const.........完整代码请登录后点击上方下载按钮下载查看