2020-03-11 Canvas 实现小球动画 #6
Comments
|
第一次来做题，第一次来写canvas动画>< |
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(); |
|
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() |
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
学习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，服务器在国内快一点
可以把核心代码放在回复里～
The text was updated successfully, but these errors were encountered: