关于Canvas中的碰撞问题

最新推荐文章于 2022-10-31 19:08:47 发布

棒棒糖呀

最新推荐文章于 2022-10-31 19:08:47 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/Rain178/article/details/82184021

版权

html5 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

html

0 篇文章 0 订阅

订阅专栏

自学前端一段时间，html,css,css3学的还是蛮有趣的，但凡有小例子我都要举一反三一下，特别有趣！！！但是呢，好景不长，js这该死的大佬挡在了我的取经之路上，着实比较抽象，索性就放弃了一段时间，师傅想去天美遨游一段时间，就这样，该死的入坑游戏“王者农药”搁置了一段时间，八月份一直在排位。。。直至今天，这次心血来潮又重新拾起，学了Canvas感觉又是重新振作信心，好了，前提有点长，现在我们进入正文。

「はい」，今日份！

首先，日常百基百科——Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

应用场景:统计图表,在线画板，小游戏...
   {php/java/c#..}
使用canvas{画布}
   #注意:canvas需要指定宽高，只能用标签属性
   或者js指定.
               !!!!一定不能用css指定
a:<canvas id="c1" width="500" height="400">
   </canvas>
   b:js
   c1.width = 500;
   c1.height = 400;
#有了画布？依据画布创建画笔(ctx)
var ctx = c1.getContext('2d');

之所以回顾这些呢，我也是刚学，一则想作为笔记；二则可以记忆一下，希望大家不要嫌烦，笔芯！

Canvas的常用属性：

ctx.fillStyle = '#f40'; //填充颜色

ctx.strokeStyle = '#eee'; //描边颜色

globalAlpha = '1'; //全局不透明度

lineWidth = 10; //描边的粗细

shadowOffsetX = 0; //阴影在X轴的偏移量

shadowOffsetY = 0； //阴影在Y轴的偏移量

Canvas的常用方法：

ctx.fillRect(x,y,w,h); // 填充一个矩形

ctx.strokeRect(x,y,w,h); //描边一个矩形

ctx.clearRect(x,y,w,h); //清除一个矩形

Next...canvas的碰撞问题：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body {
			text-align: center;
		}
		#myCanvas {
			background: #f3f3f3;
		}
	</style>
</head>
<body>
	<h2>rectangle来回晃动</h2>
	<canvas id="myCanvas" width="500" height="400"></canvas>
	<script>
		var ctx = myCanvas.getContext('2d'); //得到一个画笔
		//定义一个定时器来制作动画
		var x = 0;
		var xDirection = 1; //只能取值为1或-1，来改变在X运动的方向(经典的碰撞问题解决方案)
		var timer1 = setInterval(function(){
			//清除已有的图形
			ctx.clearRect(0,0,500,400);
			//重新绘制图形
			ctx.fillStyle='#0f0';
		    ctx.fillRect(x,100,100,80);
		    x += 10*xDirection;
		    if (x>=400) {
		    	xDirection = -1; //反方向运动
		    }else if (x<=0) {
		    	xDirection = 1;
		    }
		},100);
	</script>
</body>
</html>

碰撞之前

1.碰撞时 2.碰撞后

解决这个问题的关键是定义一个变量，xDirection = 1; //取值只能是1或者-1，通过这个变量来改变碰撞方向

棒棒糖呀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于Canvas中的碰撞问题

自学前端一段时间，html,css,css3学的还是蛮有趣的，但凡有小例子我都要举一反三一下，特别有趣！！！但是呢，好景不长，js这该死的大佬挡在了我的取经之路上，着实比较抽象，索性就放弃了一段时间，师傅想去天美遨游一段时间，就这样，该死的入坑游戏“王者农药”搁置了一段时间，八月份一直在排位。。。直至今天，这次心血来潮又重新拾起，学了Canvas感觉又是重新振作信心，好了，前提有点长，现...
复制链接

扫一扫

专栏目录