I am a teacher!

导航

统计

2020年8月9日 #

CSS动画实例:图文切换

摘要:先准备好一张图片,在页面中放置一个类名为container的层作为图文容器,在该层中再定义两个层:一个类名为image-box的层放置图片,一个类名为text-desc的层放置文本描述,HTML代码描述如下: <div class="container"> <div class="image-box 阅读全文

posted @ 2020-08-09 18:56 aTeacher 阅读(21) 评论(0) 推荐(0) 编辑

2020年8月7日 #

JavaScript小游戏实例:简单的键盘练习

摘要:键盘是一种常用的输入设备,灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功。下面我们编写一个简单的键盘练习游戏。 1.刺破气泡交互式小动画 在编写简单的键盘练习游戏之前,先设计一个简单地刺破气泡交互式小动画。 在面板底部逐个上升一些气泡,用鼠标在某个气泡上单击,该气泡被刺破,刺破后的小气泡逐 阅读全文

posted @ 2020-08-07 11:43 aTeacher 阅读(27) 评论(0) 推荐(0) 编辑

2020年8月6日 #

JavaScript小游戏实例:统一着色

摘要:设计如下的简单小游戏。 在面板(画布)中放置10行10列共100个小方块,每个小方块随机在5种颜色中选一种颜色进行着色,在面板的下方,放置对应的5种颜色色块,如图1所示。 图1 “统一着色”游戏界面 游戏要求通过每次对包含最左上角方块的相邻同色区域方块改变着色的方式,最终使得面板中的100个小方块着 阅读全文

posted @ 2020-08-06 06:05 aTeacher 阅读(62) 评论(0) 推荐(0) 编辑

2020年8月4日 #

JavaScript动画实例:炸开的小球

摘要:1.炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y)、小球半径radius、填充颜色color、圆心坐标水平方向的变化量speedX、圆心坐标垂直方向的变化量speedY。 Ball类定义2个方法:绘制小球的方法draw()和小球位置发生变化的方法update()。 定义一个 阅读全文

posted @ 2020-08-04 17:29 aTeacher 阅读(289) 评论(0) 推荐(0) 编辑

JavaScript动画实例:烟花绽放迎新年

摘要:先编写一个烟花绽放的动画效果。 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中;(2)烟花炸开成碎片,炸开的碎片慢慢消散。 为此抽象出两个对象类:Firework和Particle。其中,Firework用于表示一个烟花对象,Particle用于表示一个烟花炸开后的各碎片。 Firework 阅读全文

posted @ 2020-08-04 09:51 aTeacher 阅读(39) 评论(0) 推荐(0) 编辑

2020年8月2日 #

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 阅读(187) 评论(1) 推荐(1) 编辑

2020年8月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 阅读(50) 评论(0) 推荐(0) 编辑

2020年7月30日 #

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

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

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

2020年7月18日 #

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 阅读(101) 评论(0) 推荐(1) 编辑

JavaScript动画实例:粒子文本

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

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