Canvas波形运动

最新推荐文章于 2023-05-19 23:52:07 发布

一个爬坑的Coder

最新推荐文章于 2023-05-19 23:52:07 发布

阅读量353

点赞数

分类专栏： JavaScript学习文章标签： canvas javascript

本文链接：https://blog.csdn.net/qq_39583550/article/details/104629855

版权

JavaScript学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

小球类

class Ball{
	constructor(obj) {
		this.x = obj.x;
		this.y = obj.y;
		this.r = obj.r;
		this.scaleX = 1;
		this.scaleY = 1;
		this.color = '#E685FF';
	}
	draw(ctx){
		ctx.save();
		ctx.translate(this.x, this.y);
		ctx.scale(this.scaleX, this.scaleY);
		ctx.beginPath();
		//这里的X,Y都是原点的位置, 主要是通过上面的translate的来控制圆心的位置
		ctx.arc(0, 0, this.r, 0, Math.PI *2);
		ctx.fillStyle = this.color;
		ctx.fill();
		ctx.restore();
		return this;
	}
}

平滑运动

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    #canvas {
        box-shadow: 0 0 20px #ccc;
    }
    </style>
</head>

<body>
    <canvas id="canvas" width="800" height="500"></canvas>
    <script src="ball.js"></script>
    <script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let W = canvas.width;
    let H = canvas.height;

    let ball = new Ball({
        x: W / 2,
        y: H / 2,
        r: 45
    }).draw(ctx);
    let angle = 0;
    const SWING = 160; //(振幅)因为sin的取值范围在[-1,1],移动范围就很小, 就乘上一个固定值,这样每次移动的范围就大一些
    (function move(){
    	window.requestAnimationFrame(move);
    	ctx.clearRect(0, 0, W, H);
    	ball.x = W / 2 + Math.sin(angle) * SWING;
    	angle += 0.05;
    	angle %= Math.PI * 2;
    	ball.draw(ctx);
    })()
    </script>
</body>

</html>

平滑运动

线性运动

let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let W = canvas.width;
    let H = canvas.height;

    let ball = new Ball({
        x: 100,
        y: H / 2,
        r: 30
    }).draw(ctx);
    let angle = 0;
    
    let vx = 2;
    const SWING = 100; //(振幅)因为sin的取值范围在[-1,1],移动范围就很小, 就乘上一个固定值,这样每次移动的范围就大一些
    (function move(){
    	window.requestAnimationFrame(move);
    	ctx.clearRect(0, 0, W, H);
    	ball.x += vx;
    	ball.y = H / 2 + Math.sin(angle) * SWING;
    	angle += 0.05;
    	angle %= Math.PI * 2;
    	ball.draw(ctx);
    })()

线性运动

脉冲运动


let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let W = canvas.width;
    let H = canvas.height;

    let ball = new Ball({
        x: W / 2,
        y: H / 2,
        r: 50
    }).draw(ctx);
    let angle = 0;
    
    let initScale = 1;
    const SWING = 0.5; //(振幅)因为sin的取值范围在[-1,1],移动范围就很小, 就乘上一个固定值,这样每次移动的范围就大一些
    (function move(){
    	window.requestAnimationFrame(move);
    	ctx.clearRect(0, 0, W, H);
    	ball.scaleX = ball.scaleY = initScale + Math.sin(angle) * SWING;
    	angle += 0.05;
    	angle %= Math.PI * 2;
    	ball.draw(ctx);
    })();