web前端全系列 教程
1839个小节阅读:2244.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
xxxxxxxxxx
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var raf;
var x = 250//定义小球的圆心的默认横坐标
var y = 250//定义小球的圆形的默认纵坐标
var stepX = 5//定义小球每次运动水平方向的偏移矢量
var stepY = 2//定义小球每次运动垂直方向的偏移矢量
function draw() {
// ctx.clearRect(0, 0, 500, 500)
// 每次绘制前都画一个带点透明的矩形,这样可以产生尾巴的效果
ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0, 0, 500, 500);
//根据小球的新的圆心的位置绘制小球
ctx.beginPath()
ctx.arc(x, y, 20, 0, 2 * Math.PI)
ctx.fillStyle = 'red'
ctx.fill()
// 判断小球的位置.如果超出
if (x + 20 >= 500 || x - 20 <= 0) {
stepX = -stepX;
}
if (y + 20 >= 500 || y - 20 <= 0) {
stepY = -stepY;
}
// 改变小球的位移
x += stepX
y -= stepY
}
function anim() {
draw()//绘制小球
//告诉浏览器我要执行一个动画,传递进去的回调函数会在每次重绘之前调用,一般情况下每秒执行60次
raf = window.requestAnimationFrame(anim)
}
anim()
// 监听鼠标的移动事件,让小球跟着鼠标移动位置
c.addEventListener('mousemove', function (e) {
window.cancelAnimationFrame(raf);
x = e.offsetX;
y = e.offsetY;
draw()
});
// 点击鼠标,则继续开始动画
c.addEventListener('click', function (e) {
anim()
});