캔버스를 가르칠 생각은 없고 그냥 재미있다고 생각해서 봤습니다.
좀 거칠다는 뜻이니 비난하지 마세요. .
효과프레임 속도는 약간 낮지만 실제 성능은 물론 훨씬 더 부드럽습니다.
HTML 구현
<!DOCTYPE html><head> <meta name=viewport content=width=device-width, user-scalable=no, 초기 규모=1.0, 최대 규모=1.0, 최소 규모=1.0> <스타일> * { 여백: 0;패딩: 0;} 본문 {배경색: 연한 파란색;} #canvas {배경색: 검정;너비: 100vw;} </style></head><body> <canvas id=canvas></canvas> <script>/* 아래 참조*/</script></body>JS
window.onload = function () { let // Canvas ctx = document.getElementById('canvas').getContext('2d'), // 캔버스 크기 canvas_width = document.getElementById('canvas').width, canvas_height = document .getElementById('canvas').height, // DVD 아이콘의 텍스트 색상, 글꼴, 배경색 text_color = ['green', '파란색', '보라색', '노란색', '흰색', '노란색', '흰색'], text_font = '기울임꼴 굵게 50px 야헤이', background_color = ['빨간색', '주황색', '노란색', ' green', 'blue', 'indigo', 'violet'], // 배경 직사각형의 크기 background_width = 110, background_height = 50, // 직사각형에 텍스트를 추가할 때 높이가 약간 벗어납니다. fix_height = 7, // 속도, 다시 그릴 때마다 0.5px씩 이동합니다. speed_x = 0.5, speed_y = 0.5, // 이동 방향, 초기에는 'rb' 오른쪽 아래 방향 = 'rb', // 아이콘 x 및 y 좌표, 초기에는 0 position_x = 0, position_y = 0, // 배경 및 텍스트 색상 계산에 사용되는 충돌 횟수 = 0 dvd() function dvd() { // 이동 방향 전환(방향) { // 오른쪽 아래 케이스 'rb': position_x += speed_x position_y += speed_y break // 오른쪽 위 케이스 'rt': position_x += speed_x position_y -= speed_y break // 왼쪽 하단 케이스 'lb': position_x -= speed_x position_y += speed_y break // 왼쪽 상단 케이스 'lt': 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) { 방향 = 방향.replace('b', 't') // 충돌 횟수 횟수 += 1 } // 오른쪽 if (position_x + background_width >= canvas_width) { 방향 = 방향.replace('r', 'l') count += 1 } // 왼쪽 if (position_x < 0) { 방향 = 방향.replace(' l', 'r') count += 1 } // 위쪽 if (position_y < 0) { 방향 = 방향.replace('t', 'b') count += 1 } // Text 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] // 애니메이션 창을 시작합니다. 요청애니메이션프레임(DVD) }}위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.