yong_su的博客

学了这么久也该实践应用一下，在我们勤勤恳恳的工作之余（bushi）来画一个经常用到的粒子动画吧话不多说上代码我们细细分析：2.初始化我们的canvas获取当前区域宽高，初始化canvas，并保存宽高为下一步做准备3.定义个类我们叫做star⭐首先是他的宽高及半径，不要问为啥star是个球，因为简单着急下班🙄第二绘制我们的⭐ 嘿嘿画圆第三设置边界，顺便前期复习，也可选择超界消失根据个人喜好4.所需事件，移动及点击5. ⭐⭐⭐终点绘制动画来了！！！这里就结束咯，！！！！要认真看注

canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。​它最初由苹果内部使用自己推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。​Canvas是由HTML。

键盘事件、，有了这些事件，我们便可以开发出交互性更强的动画.

Canvas 可以用来创建各种数据可视化图表和图形，通过绘制不同的形状、线条和颜色来展示数据的特征和趋势。数据可视化的基本原理是将数据转化为可视化的图形元素，以便人们更容易理解和分析数据。数据映射：将数据值映射到可视化元素的属性上，如位置、大小、颜色等。例如，将数值映射到柱状图的高度、折线图的点坐标或饼图的扇形角度。视觉编码：选择合适的可视化元素和属性来传达数据的特征。例如，使用不同的颜色来区分不同的数据类别，使用线条的粗细来表示数据的大小。布局和排版。

相信大家平时在学习canvas或项目开发中使用canvas的时候应该都遇到过这样的需求：实现一个可以书写的 画板小工具。</</</</</

在之前的开发中，物体在运动过程中一旦超出画布，就会消失，今天学习如何去检测是否碰到了边界，碰到边界后又会有哪些处理的办法。边界检测，就是物体运动的限制范围。边界检测的范围，既可以是画布的某个区域，也可以是整个画布。</init() {//定义一个球this.x = xthis.y = ythis.radius = 10 //球的半径// 初始化一个小球;//绘制前一定要重置// 完全超出右边界})()},看图理解边界限制，什么是边界？//半径大于圆心绘制点。

碰撞检测，是物体与物体之间的关系。用来检测物体与物体之间是否发生了碰撞，例如：射击游戏，就是检测子弹与敌人的碰撞。外接矩形判定法外接圆判定法。

由实验可知，小球的速度是一个由快到慢的过程，原理很简单，距离越短，距离与方向的乘积越小，那么方向速度就越来越小。缓动动画，指带有一定缓冲的动画，物体在一定时间内渐进加速或者减速，从而使动画更加的真实和自然。缓动系数使 0-1的数，越接近1，小球移动速度越快。因为缓动动画的每一帧的速度都不同，所以它更加的自然。