aTeacher - 博客园

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 aTeacher 阅读(757) 评论(1) 推荐(1)

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 aTeacher 阅读(650) 评论(0) 推荐(0)

HTML5 Canvas小游戏基础：用户交互

摘要：交互是游戏的根本。缺少了用户交互，游戏就不能称之为游戏，只能说是动画或电影。事件是浏览器响应用户交互操作的一种机制。 1．事件和事件执行事件定义了用户与页面交互时产生的各种操作（主要通过鼠标或热键的动作引发），例如单击页面中某一个对象时，就产生一个单击（onClick）操作事件。浏览器在程序运行的阅读全文

posted @ 2020-07-30 08:45 aTeacher 阅读(1658) 评论(0) 推荐(1)

JavaScript动画实例：沿五角星形线摆动的小圆

摘要：五角星形线的笛卡尔坐标方程式可设为： r=10+(3*sin(θ*2.5))^2 x=r*cos(θ) y=r*sin(θ) （0≤θ≤2π）根据这个曲线方程，在[0,2π]区间取一系列角度值，根据给定角度值计算对应的各点坐标，然后在计算出的坐标位置绘制一个填充色交替变换的小圆，从而得到沿五角星形阅读全文

posted @ 2020-07-18 17:40 aTeacher 阅读(526) 评论(0) 推荐(1)

JavaScript动画实例：粒子文本

摘要： 1．粒子文本的实现原理粒子文本的实现原理是：使用两张 canvas，一张是用户看不到的canvas1，用来绘制文本；另一张是用户看到的canvas2，用来根据canvas1中绘制的文本数据来生成粒子。先在canvas1中用如下的语句绘制待显示的文本。 ctx1.font = '100px Pin 阅读全文

posted @ 2020-07-18 10:50 aTeacher 阅读(870) 评论(0) 推荐(0)

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 aTeacher 阅读(1193) 评论(0) 推荐(0)

JavaScript动画实例：曲线的绘制

摘要：在“JavaScript图形实例：曲线方程”一文中，我们给出了15个曲线方程绘制图形的实例。这些曲线都是根据其曲线方程，在[0,2π]区间取一系列角度值，根据给定角度值计算对应的各点坐标，然后在计算出的坐标位置描点，从而绘制出曲线。我们可以将曲线的绘制过程动态展示出来。例如，对于星形线的绘制，编阅读全文

posted @ 2020-07-15 10:25 aTeacher 阅读(1725) 评论(0) 推荐(0)

JavaScript动画实例：螺旋线

摘要：数学中有各式各样富含诗意的曲线，螺旋线就是其中比较特别的一类。螺旋线这个名词来源于希腊文，它的原意是“旋卷”或“缠卷”。例如，平面螺旋便是以一个固定点开始向外逐圈旋绕而形成的曲线。在2000多年以前，古希腊数学家阿基米德就对螺旋线进行了研究。著名数学家笛卡尔于1683年首先描述了对数螺旋线，并且列出阅读全文

posted @ 2020-07-14 16:10 aTeacher 阅读(2248) 评论(0) 推荐(0)

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 aTeacher 阅读(1517) 评论(1) 推荐(0)

JavaScript图形实例：平面镶嵌图案

摘要：用形状、大小完全相同的一种或几种平面图形进行拼接，彼此之间不留空隙、不重叠地铺成一片，就叫做这几种图形的平面镶嵌。 1．用一种多边形实现的平面镶嵌图案我们可以采用正三角形、正方形或正六边形实现平面镶嵌。（1）用正方形平铺。用正方形进行平面镶嵌比较简单，编写如下的HTML代码。 <!DOCTYP 阅读全文

posted @ 2020-07-14 08:09 aTeacher 阅读(2707) 评论(0) 推荐(0)

I am a teacher!

导航

公告