canvas画布绘制钟摆

马黑黑 发表于 2024-5-19 12:09

本帖最后由马黑黑于 2024-5-19 17:22 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
#pdcanv { display: block; margin: 20px auto; }
</style>
<h2>效果：</h2>
<canvas id="pdcanv" width="600" height="240"></canvas>
<h2>代码：</h2>
<div class='mum'>
<cl-cd data-idx="1"><canvas id="pdcanv" width="600" height="240"></canvas></cl-cd>
<cl-cd data-idx="2"> </cl-cd>
<cl-cd data-idx="3"><script></cl-cd>
<cl-cd data-idx="4"> </cl-cd>
<cl-cd data-idx="5">var pdCtx = pdcanv.getContext('2d'); //画笔</cl-cd>
<cl-cd data-idx="6"> </cl-cd>
<cl-cd data-idx="7">//创建钟摆的类</cl-cd>
<cl-cd data-idx="8">class Pendulum {</cl-cd>
<div class="tGreen"><cl-cd data-idx="9">    /* 构造函数</cl-cd>
<cl-cd data-idx="10">    ctx : 画笔</cl-cd>
<cl-cd data-idx="11">    line : 配置对象，格式为 { x: x, y: y, len: len, vx: vx, speed: speed }</cl-cd>
<cl-cd data-idx="12">    */</cl-cd></div>
<cl-cd data-idx="13">    constructor(ctx,line) {</cl-cd>
<cl-cd data-idx="14">        this.ctx = ctx;</cl-cd>
<cl-cd data-idx="15">        this.line = line;</cl-cd>
<cl-cd data-idx="16">    };</cl-cd>
<cl-cd data-idx="17"> </cl-cd>
<cl-cd data-idx="18">    //draw方法 : 绘制静态钟摆</cl-cd>
<cl-cd data-idx="19">    draw() {</cl-cd>
<div class="tGreen"><cl-cd data-idx="20">        /* x1、y1是线段底端XY坐标也是摆锤圆心坐标</cl-cd>
<cl-cd data-idx="21">        x1 等于顶端 x + 摆幅（即vx）</cl-cd>
<cl-cd data-idx="22">        y1 等于，根据长度 len 和 x1 用勾股定理计算出来</cl-cd>
<cl-cd data-idx="23">        */</cl-cd></div>
<cl-cd data-idx="24">        var x1 = this.line.x + this.line.vx;</cl-cd>
<cl-cd data-idx="25">        var y1 = Math.sqrt(this.line.len ** 2 - (x1 - this.line.x) ** 2);</cl-cd>
<cl-cd data-idx="26">        //画线</cl-cd>
<cl-cd data-idx="27">        this.ctx.beginPath();</cl-cd>
<cl-cd data-idx="28">        this.ctx.fillStyle = this.ctx.strokeStyle = 'plum';</cl-cd>
<cl-cd data-idx="29">        this.ctx.lineWidth = 2;</cl-cd>
<cl-cd data-idx="30">        this.ctx.moveTo(this.line.x, this.line.y);</cl-cd>
<cl-cd data-idx="31">        this.ctx.lineTo(x1, y1);</cl-cd>
<cl-cd data-idx="32">        this.ctx.stroke();</cl-cd>
<cl-cd data-idx="33">        //画圆</cl-cd>
<cl-cd data-idx="34">        this.ctx.beginPath();</cl-cd>
<cl-cd data-idx="35">        this.ctx.arc(x1, y1, 20, 0, 2*Math.PI);</cl-cd>
<cl-cd data-idx="36">        this.ctx.fill();</cl-cd>
<cl-cd data-idx="37">    };</cl-cd>
<cl-cd data-idx="38">    //update 方法 : 改变摆幅 vx 并调用 draw 静态绘制方法</cl-cd>
<cl-cd data-idx="39">    update() {</cl-cd>
<cl-cd data-idx="40">        this.draw();</cl-cd>
<cl-cd data-idx="41">        this.line.vx += this.line.speed; //改变摆幅</cl-cd>
<cl-cd data-idx="42">        //水平方向摆动幅度不超过 ±30</cl-cd>
<cl-cd data-idx="43">        if (Math.abs(this.line.vx) >= 30) this.line.speed = -this.line.speed;</cl-cd>
<cl-cd data-idx="44">    };</cl-cd>
<cl-cd data-idx="45">};</cl-cd>
<cl-cd data-idx="46"> </cl-cd>
<cl-cd data-idx="47">//配置钟摆 : 顶端XY坐标、长度、摆幅、速度</cl-cd>
<cl-cd data-idx="48">var option = { x: 300, y: 10, len: 200, vx: 0, speed: 1 };</cl-cd>
<cl-cd data-idx="49">//创建钟摆类实例（参数两个 : 画笔、配置）</cl-cd>
<cl-cd data-idx="50">var pd = new Pendulum(pdCtx, option);</cl-cd>
<cl-cd data-idx="51"> </cl-cd>
<cl-cd data-idx="52">//渲染函数</cl-cd>
<cl-cd data-idx="53">var render = () => {</cl-cd>
<cl-cd data-idx="54">    pdCtx.clearRect(0, 0, pdcanv.width, pdcanv.height);</cl-cd>
<cl-cd data-idx="55">    pd.update(); //调用类的 update 方法</cl-cd>
<cl-cd data-idx="56">    requestAnimationFrame(render);</cl-cd>
<cl-cd data-idx="57">};</cl-cd>
<cl-cd data-idx="58"> </cl-cd>
<cl-cd data-idx="59">render(); //启动渲染</cl-cd>
<cl-cd data-idx="60"> </cl-cd>
<cl-cd data-idx="61"></script></cl-cd>
</div>

<script>
var pdCtx = pdcanv.getContext('2d');

class Pendulum {
constructor(ctx,line) {
this.ctx = ctx;
this.line = line;
};
draw() {
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() {
this.draw();
this.line.vx += this.line.speed;
if (Math.abs(this.line.vx) >= 30) this.line.speed = -this.line.speed;
};
};

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();
requestAnimationFrame(render);
};

render();
</script>

红影发表于 2024-5-19 14:36

这个讲解特别详细，canvas制作的小摆钟真漂亮{:4_199:}

红影发表于 2024-5-19 14:38

这看不出y值的变化，如果摆幅大点，应该就能看出了{:4_173:}

马黑黑 发表于 2024-5-19 16:16

红影发表于 2024-5-19 14:38
这看不出y值的变化，如果摆幅大点，应该就能看出了

理论上应该看得出来的吧？

摆动过程中，y1坐标最大值可以等于 len + y 的初始值即钟摆几长度+顶端Y坐标值，最小值可以等于 y 的初始值。此例，当 y1 = y 时，x1 = ±x

马黑黑 发表于 2024-5-19 16:17

红影发表于 2024-5-19 14:36
这个讲解特别详细，canvas制作的小摆钟真漂亮

也不知道有木有错误，反正又不是不能摆{:4_170:}

红影发表于 2024-5-19 17:21

马黑黑发表于 2024-5-19 16:16
理论上应该看得出来的吧？

摆动过程中，y1坐标最大值可以等于 len + y 的初始值即钟摆几长度+顶端Y坐 ...

是的，理论上是可以看出来的{:4_187:}

红影发表于 2024-5-19 17:21

马黑黑发表于 2024-5-19 16:17
也不知道有木有错误，反正又不是不能摆

是啊，能正常摆起来就好{:4_173:}

马黑黑 发表于 2024-5-19 17:21

红影发表于 2024-5-19 17:21
是的，理论上是可以看出来的
对的。先抽象，再具化。

马黑黑 发表于 2024-5-19 17:23

红影发表于 2024-5-19 17:21
是啊，能正常摆起来就好

没错

红影发表于 2024-5-19 18:40

马黑黑发表于 2024-5-19 17:21
对的。先抽象，再具化。

具化就是把它摆到水平么{:4_173:}

红影发表于 2024-5-19 18:40

马黑黑发表于 2024-5-19 17:23
没错

目前看起来没问题呢{:4_187:}

马黑黑 发表于 2024-5-19 19:30

红影发表于 2024-5-19 18:40
目前看起来没问题呢

没问题就是问题大了{:4_170:}

马黑黑 发表于 2024-5-19 19:34

红影发表于 2024-5-19 18:40
具化就是把它摆到水平么

好比你做设计，如果你是优秀的设计师，你首先是从抽象开始你的工作：构思、算法的准备等等，无一不是先在大脑中有一个相对抽象的、不确切的思路，然后，逐一落实到图纸、计划书上，最后，具象化为产品。

红影发表于 2024-5-19 21:20

马黑黑发表于 2024-5-19 19:30
没问题就是问题大了

这叫什么逻辑{:4_173:}

红影发表于 2024-5-19 21:23

马黑黑发表于 2024-5-19 19:34
好比你做设计，如果你是优秀的设计师，你首先是从抽象开始你的工作：构思、算法的准备等等，无一不是先在 ...

黑黑就是这样实现设计的吧，这个结果很棒{:4_187:}

南无月 发表于 2024-5-19 22:43

看到这个教程想到了三体里的大钟摆。。。{:4_173:}

马黑黑 发表于 2024-5-19 22:54

南无月发表于 2024-5-19 22:43
看到这个教程想到了三体里的大钟摆。。。

{:4_203:}

马黑黑 发表于 2024-5-19 22:55

红影发表于 2024-5-19 21:23
黑黑就是这样实现设计的吧，这个结果很棒

这个是常规过程吧，当然俺不会写计划书{:4_170:}

马黑黑 发表于 2024-5-19 22:55

红影发表于 2024-5-19 21:20
这叫什么逻辑

正确的逻辑

红影发表于 2024-5-19 23:04

马黑黑发表于 2024-5-19 22:55
这个是常规过程吧，当然俺不会写计划书

那就不能算设计师的事，应该大都事件的策划都如此呢。

页: [1] 2 3 4

花潮论坛's Archiver

canvas画布绘制钟摆