H5-canvas:小球来回移动效果

最新推荐文章于 2025-06-25 22:00:44 发布

原创

最新推荐文章于 2025-06-25 22:00:44 发布 · 置顶 · 3.2k 阅读

11 ·

CC 4.0 BY-SA版权

大家好，最近在研究专注力的图片，想写个页面，总是不理想，将各个效果展示记录一下：小球移动效果：如图：动态图咋整上来呢？搞个说明图好了！

可以将代码复制，运行下，没什么特别注意的，就是js的jar包，记得引入！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小球移动</title>
	<script src="../js/jquery-1.7.2.js"></script>
</head>
<body>
	<div align="center">
		<canvas id="canvas" width="500" height="500" style="background:#000;" >
		    your browser not support canvas
		</canvas>
	</div>

<script>
var x = 20;
var speed = 4;
//电脑的帧率是1秒钟60Hz， 就相当于一秒钟可以播放60张图片，就相当于播放一张图片使用16.7ms
function draw () {
	var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d'); //得到画笔
    //1. 先把画布清空
    context.clearRect(0, 0, canvas.width, canvas.height);
    //2. 画小球
    context.beginPath();
    var gradien