JavaScript动画实例：爆裂的粒子
摘要：1．一个粒子的运动 一个半径为3的实心圆以画布的中心（canvas.width/2,canvas.height/2）为起点，沿着一条曲线进行移动。编写如下的HTML代码。 <!DOCTYPE html> <html> <head> <title>粒子的运动</title> </head> <body
阅读全文
posted @ 2020-09-29 05:31
随笔分类 - JavaScript程序设计
JavaScript动画实例：沿圆周运动的圆圈
摘要：1．一个沿圆周运动的圆圈 一个半径为size的圆圈以画布的中心（canvas.width/2,canvas.height/2）为起点，沿着一个圆周运动。编写如下的HTML代码。 <!DOCTYPE html> <html> <head> <title>沿圆周运动的圆圈</title> </head>
阅读全文
posted @ 2020-09-28 05:50
JavaScript小游戏实例：简单的键盘练习
摘要：键盘是一种常用的输入设备，灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功。下面我们编写一个简单的键盘练习游戏。 1．刺破气泡交互式小动画 在编写简单的键盘练习游戏之前，先设计一个简单地刺破气泡交互式小动画。 在面板底部逐个上升一些气泡，用鼠标在某个气泡上单击，该气泡被刺破，刺破后的小气泡逐
阅读全文
posted @ 2020-08-07 11:43
JavaScript小游戏实例：统一着色
摘要：设计如下的简单小游戏。 在面板（画布）中放置10行10列共100个小方块，每个小方块随机在5种颜色中选一种颜色进行着色，在面板的下方，放置对应的5种颜色色块，如图1所示。 图1 “统一着色”游戏界面 游戏要求通过每次对包含最左上角方块的相邻同色区域方块改变着色的方式，最终使得面板中的100个小方块着
阅读全文
posted @ 2020-08-06 06:05
JavaScript动画实例：炸开的小球
摘要：1．炸开的小球 定义一个小球对象类Ball，它有6个属性：圆心坐标（x,y）、小球半径radius、填充颜色color、圆心坐标水平方向的变化量speedX、圆心坐标垂直方向的变化量speedY。 Ball类定义2个方法：绘制小球的方法draw()和小球位置发生变化的方法update()。 定义一个
阅读全文
posted @ 2020-08-04 17:29
JavaScript动画实例：烟花绽放迎新年
摘要：先编写一个烟花绽放的动画效果。 放烟花时，一个烟花可分为两个阶段：（1）烟花上升到空中；（2）烟花炸开成碎片，炸开的碎片慢慢消散。 为此抽象出两个对象类：Firework和Particle。其中，Firework用于表示一个烟花对象，Particle用于表示一个烟花炸开后的各碎片。 Firework
阅读全文
posted @ 2020-08-04 09:51
JavaScript动画实例：圆点的衍生
摘要：考虑如下的曲线方程： R=S*sqrt(n) α=n*θ X=R*SIN(α) Y=R*COS(α) 其中，S和θ可指定某一个定值。对n循环取0~999共1000个值，对于每个n，按照给定的坐标方程，求得一个坐标值(x,y)，然后以（x,y）为圆心绘制一个半径为6的圆，可以得到一个螺旋状的图形。 编
阅读全文
posted @ 2020-08-02 10:41
JavaScript动画实例：运动的字母特效
摘要：已知圆的坐标方程为： X=R*SIN(θ) Y=R*COS(θ) （0≤θ≤2π） 给定初始坐标位置（X,Y），按照圆的坐标方程，从角度angle = 0开始，每间隔angleSpeed = 0.2求得一个坐标值(x,y)，将这个坐标值作为偏移变化量，分别加到初始坐标位置上，即在（X+x,Y+y）处
阅读全文
posted @ 2020-08-01 11:01
HTML5 Canvas小游戏基础：用户交互
摘要：交互是游戏的根本。缺少了用户交互，游戏就不能称之为游戏，只能说是动画或电影。事件是浏览器响应用户交互操作的一种机制。 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作（主要通过鼠标或热键的动作引发），例如单击页面中某一个对象时，就产生一个单击（onClick）操作事件。浏览器在程序运行的
阅读全文
posted @ 2020-07-30 08:45
JavaScript动画实例：沿五角星形线摆动的小圆
摘要：五角星形线的笛卡尔坐标方程式可设为： r=10+(3*sin(θ*2.5))^2 x=r*cos(θ) y=r*sin(θ) （0≤θ≤2π） 根据这个曲线方程，在[0,2π]区间取一系列角度值，根据给定角度值计算对应的各点坐标，然后在计算出的坐标位置绘制一个填充色交替变换的小圆，从而得到沿五角星形
阅读全文
posted @ 2020-07-18 17:40
JavaScript动画实例：粒子文本
摘要：1．粒子文本的实现原理 粒子文本的实现原理是：使用两张 canvas，一张是用户看不到的canvas1，用来绘制文本；另一张是用户看到的canvas2，用来根据canvas1中绘制的文本数据来生成粒子。 先在canvas1中用如下的语句绘制待显示的文本。 ctx1.font = '100px Pin
阅读全文
posted @ 2020-07-18 10:50
JavaScript动画实例：旋转的正三角形
摘要：给定一个正三角形的重心坐标为（x0,y0），高为h，可以用如下的语句绘制一个底边水平的正三角形。 ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3); ctx.lineTo(x0-h/Math
阅读全文
posted @ 2020-07-15 15:35
JavaScript动画实例：曲线的绘制
摘要：在“JavaScript图形实例：曲线方程”一文中，我们给出了15个曲线方程绘制图形的实例。这些曲线都是根据其曲线方程，在[0,2π]区间取一系列角度值，根据给定角度值计算对应的各点坐标，然后在计算出的坐标位置描点，从而绘制出曲线。 我们可以将曲线的绘制过程动态展示出来。 例如，对于星形线的绘制，编
阅读全文
posted @ 2020-07-15 10:25
JavaScript动画实例：螺旋线
摘要：数学中有各式各样富含诗意的曲线，螺旋线就是其中比较特别的一类。螺旋线这个名词来源于希腊文，它的原意是“旋卷”或“缠卷”。例如，平面螺旋便是以一个固定点开始向外逐圈旋绕而形成的曲线。在2000多年以前，古希腊数学家阿基米德就对螺旋线进行了研究。著名数学家笛卡尔于1683年首先描述了对数螺旋线，并且列出
阅读全文
posted @ 2020-07-14 16:10
JavaScript图形实例：阿基米德螺线
摘要：1．阿基米德螺线 阿基米德螺线亦称“等速螺线”。当一点P沿动射线OP以等速率运动的同时，该射线又以等角速度绕点O旋转，点P的轨迹称为“阿基米德螺线”。 阿基米德螺线的笛卡尔坐标方程式为： r=10*(1+t) x=r*cos(t * 360) y=r*sin(t *360) 编写如下的HTML代码。
阅读全文
posted @ 2020-07-14 12:14
JavaScript图形实例：平面镶嵌图案
摘要：用形状、大小完全相同的一种或几种平面图形进行拼接，彼此之间不留空隙、不重叠地铺成一片，就叫做这几种图形的平面镶嵌。 1．用一种多边形实现的平面镶嵌图案 我们可以采用正三角形、正方形或正六边形实现平面镶嵌。 （1）用正方形平铺。 用正方形进行平面镶嵌比较简单，编写如下的HTML代码。 <!DOCTYP
阅读全文
posted @ 2020-07-14 08:09
JavaScript动画基础：canvas绘制简单动画
摘要：动画是将静止的画面变为动态的艺术．实现由静止到动态，主要是靠人眼的视觉残留效应。视觉残留也叫视觉暂留现象，物体在快速运动时, 当人眼所看到的影像消失后，人眼仍能继续保留其影像0.1~0.4秒左右的图像，这种现象被称为视觉暂留现象。利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动画影片。 电
阅读全文
posted @ 2020-07-13 13:34
JavaScript动画实例：动感小球
摘要：已知圆的坐标方程为： X=R*SIN(θ) Y=R*COS(θ) （0≤θ≤2π） 将0~2π区间等分48段，即设定间隔dig的值为π/24。θ初始值从0开始，按曲线方程求得坐标值(x,y)，并在当前坐标处绘制一个半径为r（相比R，r小得多）实心圆。之后每隔0.05秒，清除画布，将θ的初始值加π/2
阅读全文
posted @ 2020-07-12 20:55
JavaScript图形实例：Canvas API
摘要：1．Canvas概述 Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 要使用HTML5在浏览器窗口中绘制图形，首先需要在HTML文档中新建一个canvas网页元素。一般方法如下： <canvas id="
阅读全文
posted @ 2020-07-10 18:18
JavaScript图形实例：随机SierPinski三角形
摘要：在“JavaScript图形实例：SierPinski三角形”中，我们介绍了SierPinski三角形的基本绘制方法，在“JavaScript图形实例：迭代函数系统生成图形”一文中，介绍了采用IFS方法生成SierPinski三角形的方法。下面再介绍两种SierPinski三角形的构造方法，以扩展知
阅读全文
posted @ 2020-07-08 06:44
