本篇文章给大家分享的是有关使用canvas怎么绘制一个DVD待机动画，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联是一家专注于网站设计、网站制作与策划设计,固阳网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:固阳等地区。固阳做网站价格咨询:13518219792
HTML
JS
window.onload = function () {
let
// 画布
ctx = document.getElementById('canvas').getContext('2d'),
// 画布大小
canvas_width = document.getElementById('canvas').width,
canvas_height = document.getElementById('canvas').height,
// DVD 图标的文本颜色、字体、背景色
text_color = ['green', 'blue', 'purple', 'yellow', 'white', 'yellow', 'white'],
text_font = 'italic bold 50px yahei',
background_color = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
// 背景矩形的尺寸
background_width = 110,
background_height = 50,
// 向矩形添加文本时，高度有点偏差
fix_height = 7,
// 速度，每次重绘移动 0.5 px
speed_x = 0.5,
speed_y = 0.5,
// 移动方向，初始为 'r-b' 右下
direction = 'r-b',
// 图标 x 和 y 坐标，初始为 0
position_x = 0,
position_y = 0,
// 碰撞次数，用来计算背景和文本颜色
count = 0
dvd()
function dvd() {
// 移动方向
switch (direction) {
// 右下
case 'r-b':
position_x += speed_x
position_y += speed_y
break
// 右上
case 'r-t':
position_x += speed_x
position_y -= speed_y
break
// 左下
case 'l-b':
position_x -= speed_x
position_y += speed_y
break
// 左上
case 'l-t':
position_x -= speed_x
position_y -= speed_y
break
}
// 清空画布
ctx.clearRect(0, 0, canvas_width, canvas_height)
// 重绘
ctx.fillRect(position_x, position_y, background_width, background_height)
// 碰撞检测
// 底
if (position_y + background_height >= canvas_height) {
direction = direction.replace('b', 't')
// 碰撞次数统计
count += 1
}
// 右
if (position_x + background_width >= canvas_width) {
direction = direction.replace('r', 'l')
count += 1
}
// 左
if (position_x < 0) {
direction = direction.replace('l', 'r')
count += 1
}
// 上
if (position_y < 0) {
direction = direction.replace('t', 'b')
count += 1
}
// 文本
ctx.font = text_font
ctx.fillStyle = text_color[count % 7]
ctx.fillText("DVD", position_x, position_y + background_height - fix_height)
// 背景色
ctx.fillStyle = background_color[count % 7]
// 开始动画
window.requestAnimationFrame(dvd)
}
}以上就是使用canvas怎么绘制一个DVD待机动画，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
文章标题：使用canvas怎么绘制一个DVD待机动画
转载源于：
http://bjjierui.cn/article/pphsgs.html
