第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动

最新推荐文章于 2023-05-30 18:01:27 发布
最新推荐文章于 2023-05-30 18:01:27 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： html+css 文章标签： html5 canvas 小球运动 小球在固定的区域内运动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liumingm_music/article/details/28944179
版权 
<html>
	<head>
		<title>小球在一个区域运动</title>
		<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
	</head>
	
	<body>
		<canvas id="mc" width="900px" height="500px">
		</canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('mc');
			var cxt = canvas.getContext('2d');
			//定义一个小球
			var ball = {
				position : {x : 100,y : 100},	//球的位置
				r : 30,	//球的半径
				vx : 300,	//球在X轴的速度
				vy : 200	//球在Y轴的速度
			}; 
			var cyc = 10;
			var somethingAsync = eval(Jscex.compile("async", function () {
				//结合物理里面的知识即可
				while (true) {
					cxt.fillStyle = "rgba(0, 0, 0, .1)";
          cxt.fillRect(0, 0, canvas.width, canvas.height);
          cxt.fillStyle = "#FA340A";
          cxt.beginPath();
最低0.47元/天 解锁文章
我有一个小毛驴
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas 创建一个小球，并且可以在画布里来回移动
boonyaxnn的博客
05-16 996
1、获取页面元素，并关联上下文； var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); 2、 当小球到底画布的最右侧，则清空画布；（x >=canvas.width+20），+20是小球完全走出页面；-20就是小球在画布的最右侧 var x=100; ...
JavaScript html5 canvas画布中删除一个块区域的方法
10-22
在JavaScript HTML5中，Canvas API 是一个强大的工具，允许开发者在网页上动态绘制图形。本文将深入探讨如何在Canvas画布上删除一个特定的块区域，以及涉及到的相关技术。 首先，Canvas API 提供了 `clearRect()` ...
Canvas上画小球
09-30
用JS在Canvas上画一个简单的小球，实例代码。
Canvas绘制小球（面向对象思想）
唐立彤的博客
12-07 711
面向对象其实理解起来，说容易也容易，说难也确实很难，而且，明白什么是面向对象，却未必能写出来好的代码： 下面是一个简单的例子，大家可以参考一下： * { margin: 0; padding: 0; } body { text-ali
Jscript动画系列(1)-----用JS在Canvas上画一个小球
Jsenna的博客
09-30 567
最近在学习JS动画，有一些心的同大家分享！由于前期内容比较少，样式什么的就写在Html文件里了！ 欢迎，萌新提问，大神评论 首先(Index.html) &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;this is one Ball&lt;/tit..
canvas 绘制特效 小球连接线动画
rudy_zhou的博客
05-11 1078
canvas 绘制特效 小球连接线动画引言详细代码demo演示解释结语 引言    一个很经典的特效，花了一点时间自己手动写了一个，先上图： 详细代码 html <canvas id="canvas_bg"></canvas> css html, body { height: 100%; padding: 0; margin: 0; } #canvas_bg { display: block; } javascript class circle { const
html5-canvas中使用clip抠出一个区域的示例代码
09-28
在这个示例中，我们将讨论如何使用 `clip()` 方法在Canvas上创建一个剪裁区域，从而实现“抠出”特定形状的功能。 首先，`clip()` 方法在Canvas API中用于定义一个剪裁区域。当你在调用 `clip()` 之后绘制任何内容...
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
01-19
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <...
HTML5 使用canvas画布做小球回弹动画
05-14
首先，我们需要在HTML文件中创建一个`<canvas>`元素，并为其指定ID，以便于JavaScript代码中引用： ```html <!DOCTYPE html> <html lang="zh"> <title>HTML5小球回弹动画 <canvas id="ballCanvas" width=...
canvas实现动态小球
weixin_44669966的博客
05-17 437
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
html5 标签球
01-19
html5 标签球
网页，html5,canvas，js 动态绘制柱形图
05-31
网页，html5,canvas，js 动态绘制柱形图
html画布实现小球沿直线下落,canvas实现波浪进度小球
weixin_39621456的博客
06-01 298
看一下最终效果：canvas波浪进度球.gif首先：HTML放三个canvas标签这里考虑到需求页面有三个类似小球，且后续可能还会用到，所以对绘制小球的方法进行封装：1、定义方法，并创建画布cW,cH为canvas宽高function drawRate(id, rate, color1, color2, color3, color4){//创建画布var canvas = document.get...
[面向对象的案例]在canvas画布内实现小球的随机移动
weixin_34223655的博客
11-18 312
//css部分,给画布设置边框 <style> canvas { border:1px solid orange; } </style> //html 添加画布 <canvas id="game" width="500" height="500"></canvas...
03-canvas 单个小球运动实验
祥哥的说
12-25 253
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;单个小球弹跳运动实验&lt;/title&gt; &lt;style&gt; #canvas{
Canvas---区域（Range）
RainMcCom的博客
08-23 940
构造Region构造Region有4个构造函数 public Region() //创建一个空的区域 public Region(Region region) //拷贝一个region的范围 public Region(Rect r) //创建一个矩形的区域 public Region(int left, int top, int right, int bottom) //创建
canvas 画区域，现有功能支持画多区域，删除选中单独某个区域。后续增加拖拽等
最新发布
w643462659的博客
05-30 750
canvas 画区域，现有功能支持画多区域，删除选中单独某个区域。后续增加拖拽等
canvas之小球动画
小白小白从不日别的博客
07-17 629
原理及分析： 首先，利用canvas先绘制一个一定半径的球 其次，要注意在小球运动的过程中，小球的x坐标和y坐标是实时都在变化的，因此在绘制小球的时候就不能将其写死 再者，要明白在浏览器上：向右运动是x轴的正方向，向下运动是y轴的正方向；因此在设置小球在x轴和y轴上的运行速度时需要注意 最后，需要设置边界值：当小球在x轴上运动到小于它的半径时，此时应该向右运动了；当小球在x轴上运动到宽度-半径时就应该向左运动；当小球在y轴上运动到高度-半径时，就应该向上运动了；当小球在y轴上运动到小于等于半径时就应
在页面中使用HTML5绘图标签canvas，实现一个绘图板交互功能含画布的清空
05-12
好的，以下是一个简单的HTML文件，实现了一个绘图板交互功能，包括画线、画圆、清空画布等功能： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘图板</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <br> <button onclick="drawLine()">画线</button> <button onclick="drawCircle()">画圆</button> <button onclick="clearCanvas()">清空</button> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var isDrawing = false; var lastX = 0; var lastY = 0; function drawLine() { canvas.addEventListener("mousedown", function(e) { isDrawing = true; lastX = e.clientX - canvas.offsetLeft; lastY = e.clientY - canvas.offsetTop; }); canvas.addEventListener("mousemove", function(e) { if (isDrawing) { ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); ctx.stroke(); lastX = e.clientX - canvas.offsetLeft; lastY = e.clientY - canvas.offsetTop; } }); canvas.addEventListener("mouseup", function(e) { isDrawing = false; }); } function drawCircle() { canvas.addEventListener("mousedown", function(e) { ctx.beginPath(); ctx.arc(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, 10, 0, 2 * Math.PI); ctx.stroke(); }); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } </script> </body> </html> ``` 在这个HTML文件中，我们使用了Canvas标签创建了一个500x500的画布，并定义了三个按钮：画线、画圆、清空，分别对应了绘制直线、绘制圆形和清空画布三个功能。 在JavaScript代码中，我们使用了Canvas的getContext()方法获取了画布的2D上下文，然后定义了isDrawing、lastX和lastY三个变量，分别表示当前是否正在绘制、上一个绘制点的横坐标和纵坐标。 对于画线功能，我们在鼠标按下、移动和松开三个事件中分别定义了对应的操作，使用了Canvas的beginPath()、moveTo()、lineTo()和stroke()方法，完成了绘制直线的功能。 对于画圆功能，我们只需要在鼠标按下事件中绘制一个半径为10的圆形即可。 对于清空功能，我们使用了Canvas的clearRect()方法，将画布上的所有内容清除。 希望这个例子能够帮助你理解如何使用Canvas实现一个简单的绘图板交互功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值