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

最新推荐文章于 2024-05-11 09:29:36 发布

置顶樱梦雪苹宝

最新推荐文章于 2024-05-11 09:29:36 发布

阅读量3k

点赞数

分类专栏： js js样式 html

本文链接：https://blog.csdn.net/yingmengxuepingbao/article/details/86691210

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

js样式

20 篇文章 0 订阅

订阅专栏

html

20 篇文章 1 订阅

订阅专栏

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

可以将代码复制，运行下，没什么特别注意的，就是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 gradient = context.createRadialGradient(x-10,190,0,x,200,20);
    gradient.addColorStop(0,'#fff');
    gradient.addColorStop(1,'#333');
    context.fillStyle = gradient;
    context.arc(x, 200, 20, 0, 2*Math.PI);
    context.fill();
    //3. x要移动
    x += speed;
    if(x>canvas.width - 20||x<20){
        speed = -speed;
    }
    //被优化过的动画执行方向1.递归调用；2.可以自适应浏览器的刷新的帧率
    window.requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</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 xspeed = 2;
var yspeed = 2;
//小球的初始位置
var x = 100;
var y = 250;
function draw() {
   var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d'); //得到画笔
    //1. 先把画布清空
    context.clearRect(0, 0, canvas.width, canvas.height);
    //创建一张新的玻璃纸
    context.beginPath();
    var gradient = context.createRadialGradient(x - 10, y-10, 0, x, y, 20);
    gradient.addColorStop(0, '#fff');
    gradient.addColorStop(1, '#333');
    context.fillStyle = gradient;
    context.arc(x, y, 20, 0, 2*Math.PI);
    context.fill();
    x += xspeed;
    y += yspeed;
    //水平方向到达了边界, 就调头， 速度往反方向
    if (x < 20 || x > canvas.width - 20) {
        xspeed = -xspeed;
    }
    if (y < 20 || y > canvas.height - 20) {
        yspeed = -yspeed;
    }
    window.requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>

<!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 type="text/javascript">
	
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");//获取画笔
  var move_x = 5;//像素移动的位置，正数的时候向下，负数向上
  var x_axis =20;//x轴
  var move_y = 1;//像素移动的位置，正数的时候向，负数向
  var y_axis =20;//y轴
 function draw(){
 	//清空画布
	 context.clearRect(0,0,500,500);
	 // 参数1：渐变的开始圆的 x 坐标；参数2：渐变的开始圆的 y 坐标；参数3：开始圆的半径；参数4：渐变的结束圆的 x 坐标，参数5：渐变的结束圆的 y 坐标；参数6：结束圆的半径
	 var gradient = context.createRadialGradient(x_axis,y_axis,0,x_axis,y_axis,20);
	 gradient.addColorStop(0,'#fff');
	 gradient.addColorStop(1,'#333');
	 context.fillStyle = gradient;//定义颜色
	 
	 context.beginPath();//重新开始画，防止冲突重叠
	 context.arc(x_axis,y_axis,20,0,Math.PI*2,20);//x,y坐标,半径,圆周率
	 context.closePath();//结束画布，防止冲突重叠
	 context.fill();//渲染结束
	 x_axis +=move_x;//横轴+移动位置
	 if(x_axis == 0 || x_axis ==500){//横向移动
	  move_x = move_x * (-1);//掉头位置
	 }
	 y_axis += move_y;
	 if(y_axis == 0|| y_axis==500){
	 	move_y = move_y*(-1);
	 }
	 window.requestAnimationFrame(draw);
 }
 draw(); 
</script>
	</body>
</html>

樱梦雪苹宝

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
H5-canvas:小球来回移动效果

大家好，最近在研究专注力的图片，想写个页面，总是不理想，将各个效果展示记录一下：小球移动效果：如图：动态图咋整上来呢？搞个说明图好了！可以将代码复制，运行下，没什么特别注意的，就是js的jar包，记得引入！&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl...
复制链接

扫一扫