免责声明

不是打算教 canvas，只是觉得好玩就简单看了一下。

意思就是做得略粗糙，别喷我。。

效果

帧数略低，实际当然流畅得多。

实现 HTML

* {margin: 0;padding: 0;}

body {background-color: lightblue;}

#canvas {background-color: black;width: 100vw;}

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)

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。