HTML5 Canvas小游戏基础：用户交互
摘要：交互是游戏的根本。缺少了用户交互，游戏就不能称之为游戏，只能说是动画或电影。事件是浏览器响应用户交互操作的一种机制。 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作（主要通过鼠标或热键的动作引发），例如单击页面中某一个对象时，就产生一个单击（onClick）操作事件。浏览器在程序运行的
阅读全文
posted @ 2020-07-30 08:45
07 2020 档案
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
JavaScript图形实例：像雪花一样的Hexaflake分形
摘要：编写如下的函数： function drawHexagon(x,y,L) { ctx.beginPath(); ctx.moveTo(x-sqrt3/2*L,y-L/2); ctx.lineTo(x-sqrt3/2*L,y+L/2); ctx.lineTo(x,y+L); ctx.lineTo(x+
阅读全文
posted @ 2020-07-07 10:29
JavaScript图形实例：H分形
摘要：H分形是由一个字母H演化出迷宫一样场景的分形图案，其构造过程是：取一个中心点（x,y），以此中心点绘制一条长为L的水平直线和两条长为H的竖直直线，构成一个字母“H”的形状；再以两条竖直直线的上下共4个端点为中心点，分别绘制一条长为L/2的水平直线和两条长为H/2的竖直直线；重复以上操作直至达到要求的
阅读全文
posted @ 2020-07-07 06:44
JavaScript图形实例：Hilbert曲线
摘要：德国数学家David Hilbert在1891年构造了一种曲线，首先把一个正方形等分成四个小正方形，依次从西北角的正方形中心出发往南到西南正方形中心，再往东到东南角的正方形中心，再往北到东北角正方形中心，这是一次迭代；如果对四个小正方形继续上述过程，往下划分，反复进行，最终就得到一条可以填满整个正方
阅读全文
posted @ 2020-07-06 20:13
JavaScript图形实例：再谈IFS生成图形
摘要：在“JavaScript图形实例：迭代函数系统生成图形”一文中，我们介绍了采用迭代函数系统（Iterated Function System，IFS）创建分形图案的一些实例。在该文中，仿射变换函数W的一般形式为 X1=a*X0 + b*Y0 + e Y1=c*X0 + d*Y0 + f 给定不同的I
阅读全文
posted @ 2020-07-05 16:27
JavaScript动画实例：递归分形图动态展示
摘要：在“JavaScript图形实例：SierPinski三角形” 和“JavaScript图形实例：Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法。我们可以将绘制的分形图形每隔一定的时间间隔后，增加递归深度重新绘制一次，这样就可以得到分形图形的动态生成效果。 1．SierPinsk
阅读全文
posted @ 2020-07-05 10:59
JavaScript图形实例：迭代函数系统生成图形
摘要：迭代函数系统（Iterated Function System，IFS）可以用来创建分形图案，它是分形理论的重要分支，也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一。这一工作最早可以追溯到Hutchinson于1981年对自相似集的研究。美国科学家M.F.Barnsley于1985年发
阅读全文
posted @ 2020-07-04 18:17
JavaScript图形实例：SierPinski三角形
摘要：1．SierPinski三角形 Sierpinski三角形是一种分形，由波兰数学家谢尔宾斯基在1915年提出，它是一种典型的自相似集。其生成过程为： （1）取一个三角形（多数使用等边三角形）； （2）沿三边中点连线，将它分成四个小三角形； （3）对上、左、右这三个小三角形重复这一过程。 SierPi
阅读全文
posted @ 2020-07-04 07:59
JavaScript图形实例：Levy曲线及其变形
摘要：Levy曲线是将一条线段不停地分形成两条长度相等且相互垂直的线段而生成的。Levy分形的最后很像一个英文字母C，所以也称它为C曲线。 Levy曲线的生成示意如图1所示。 图1 Levy曲线的生成 1．Levy曲线 Levy曲线采用递归过程易于实现，编写如下的HTML代码。 <!DOCTYPE htm
阅读全文
posted @ 2020-07-03 11:47
JavaScript图形实例：Koch曲线
摘要：Koch曲线的构造过程是：取一条长度为L0的直线段，将其三等分，保留两端的线段，将中间的一段改换成夹角为60度的两个等长直线；再将长度为L0/3的4个直线段分别进行三等分，并将它们中间的一段均改换成夹角为60度的两段长为L0/9的直线段；重复以上操作直至无穷，可得以一条具有自相似结构的折线，如图1所
阅读全文
posted @ 2020-07-02 19:40
JavaScript图形实例：递归生成树
摘要：观察自然界中树的分叉，一根主干生长出两个侧干，每个侧干又长出两个侧干，以此类推，便生长出疏密有致的结构。这样的生长结构，使用递归算法可以模拟出来。 例如，分叉的侧干按45°的偏转角度进行生长的递归示意图如图1所示。 图1 生成树的递归示意图 按照树分叉生长侧干的递归思想，编写如下的HTML代码。 <
阅读全文
posted @ 2020-07-01 20:43
