请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-5-19 17:22 编辑
效果：
代码：
<canvas id="pdcanv" width="600" height="240"></canvas>
<script>
var pdCtx = pdcanv.getContext('2d'); //画笔
//创建钟摆的类
class Pendulum {
/* 构造函数
ctx : 画笔
line : 配置对象，格式为 { x: x, y: y, len: len, vx: vx, speed: speed }
*/
constructor(ctx,line) {
this.ctx = ctx;
this.line = line;
};
//draw方法 : 绘制静态钟摆
draw() {
/* x1、y1是线段底端XY坐标也是摆锤圆心坐标
x1 等于顶端 x + 摆幅（即vx）
y1 等于，根据长度 len 和 x1 用勾股定理计算出来
*/
var x1 = this.line.x + this.line.vx;
var y1 = Math.sqrt(this.line.len ** 2 - (x1 - this.line.x) ** 2);
//画线
this.ctx.beginPath();
this.ctx.fillStyle = this.ctx.strokeStyle = 'plum';
this.ctx.lineWidth = 2;
this.ctx.moveTo(this.line.x, this.line.y);
this.ctx.lineTo(x1, y1);
this.ctx.stroke();
//画圆
this.ctx.beginPath();
this.ctx.arc(x1, y1, 20, 0, 2*Math.PI);
this.ctx.fill();
};
//update 方法 : 改变摆幅 vx 并调用 draw 静态绘制方法
update() {
this.draw();
this.line.vx += this.line.speed; //改变摆幅
//水平方向摆动幅度不超过 ±30
if (Math.abs(this.line.vx) >= 30) this.line.speed = -this.line.speed;
};
};
//配置钟摆 : 顶端XY坐标、长度、摆幅、速度
var option = { x: 300, y: 10, len: 200, vx: 0, speed: 1 };
//创建钟摆类实例（参数两个 : 画笔、配置）
var pd = new Pendulum(pdCtx, option);
//渲染函数
var render = () => {
pdCtx.clearRect(0, 0, pdcanv.width, pdcanv.height);
pd.update(); //调用类的 update 方法
requestAnimationFrame(render);
};
render(); //启动渲染
</script>
| 
发表于 2024-5-19 12:09
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-19 22:43
