2020-03-11 Canvas 实现小球动画

fanmingfei commented 4 years ago

学习canvas的时候到了，你要是不会canvas，写完这道题，你就会canvas了，听我的。预估学习完成用时：35min。

canvas 的宽500 高 500 底色黑色创建一个小球宽20 高20 点击小球从 (20, 20) 的地方，向 (480, 480) 由慢到快移动

canvas 基础用法：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage canvas 绘制图形：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes canvas 基础动画：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations

动画实现：自己探索吧。

可以把自己的效果写在以下任意平台上：

http://codepen.io/ 大佬们都在上面写demo，不过国内访问巨慢 https://jsbin.com/ 这个平台比较简洁，如果能进得去可以用这个 https://code.h5jun.com/?html,output 这个是月影大佬自己搭建的jsbin，服务器在国内快一点

可以把核心代码放在回复里～

Anian-skye commented 4 years ago

第一次来做题，第一次来写canvas动画><

https://codepen.io/Qmelbourne/pen/OJVQyEz

Vince-9 commented 4 years ago

我也来从零开始学着写一个

Vince-9 commented 4 years ago

function moveCircle() {
  let x = 20, y = 20, step = 0.3, accelerate = 1.03;
  const canvas = document.querySelector('#canvas');
  const ctx = canvas.getContext('2d');
  let ani = null;
  drawCircle();

  function drawCircle() {
    ctx.clearRect(0, 0, 500, 500);
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();
  }

  function draw() {
    x = y = x + step;
    step *= accelerate;
    drawCircle();
    if (x + step < 480) {
      ani = window.requestAnimationFrame(draw);
    }
  }

  const { x: cx, y: cy } = canvas.getBoundingClientRect()
  canvas.addEventListener('click', e => {
    // 若鼠标点击位置在离小球中心x y的距离小于20
    if ((cx + x - e.x) * (cx + x - e.x) + (cy + y - e.y) * (cy + y - e.y) <= 400) {
      x = y = 20;
      step = 0.3;
      window.cancelAnimationFrame(ani);
      window.requestAnimationFrame(draw);
    }
  })
}

moveCircle();

LiZhaji commented 4 years ago

~~简单的从左往右实现：https://code.h5jun.com/zadur/edit?js,output~~ 审题错误，重来：https://code.h5jun.com/qewiv/edit?js,output 点击 Run With JS 看效果

const ctx = document.querySelector("#cvs").getContext('2d')

function draw(){
  let x = 20
  let y = 20
  let step = 1.1
  function drawBall(){
    ctx.clearRect(0, 0, 500, 500)
    ctx.beginPath()
    ctx.arc(x, y, 10, 0, 2 * Math.PI)
    ctx.fillStyle = '#fff'
    ctx.fill()
    x = y += step
    step += 0.1
    if(x > 480){
//       cancelAnimationFrame(raf)
//       return
      x = y = 20
      step = 0.1
    }
    requestAnimationFrame(drawBall)
  }
  const raf = requestAnimationFrame(drawBall)
}
draw()

xiaosen7 commented 4 years ago

<body>
    <canvas width="500" height="500" id='can' style="border: 1px solid #ccc"></canvas>
    <script>
        let can = document.getElementById('can');
        let x = 20, y = 20, step = 1, r = 12.5;
        let timer, ctx = can.getContext('2d');

        function draw() {

            if (x > 480) {
                x = y = 480;
                clearTimeout(timer);
            }

            ctx.clearRect(0, 0, can.width, can.height)
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI, true);
            ctx.stroke();
            x += step;
            y += step;
            step = step * 1.1;
        }

        can.onclick = function (e) {
            let _x = e.clientX - this.offsetTop,
                _y = e.clientY - this.offsetLeft;

            if (Math.abs(_x - x) < r && Math.abs(_y - y) < r) {
                timer = setInterval(move, 16);
                can.onclick = null;
            }

        }

        draw();

    </script>
</body>

liuyingbin19222 commented 4 years ago

https://codepen.io/yingbin/pen/qBdxrwx

eva-engine / 2021questions

2020-03-11 Canvas 实现小球动画 #6