|
|||
|
摘要：
我们平时在开发前端页面的时候，经常会播放一段帧序列。这段帧序列就像gif图片那样，反复循环播放。那大家可能会说，直接用gif图片就好了，干嘛还去模拟呢？那是因为要做得更加灵活，我们要做到以下几点：1、我们希望这段帧动画只循环播放所指定的次数。2、我们希望帧动画结束的瞬间执行某种操作。这个在游戏中大量存在。3、我们想自如的控制播放的速度。4、我们想尽可能让这个帧动画的实现方式兼容大部分浏览器，在移动和pc端都能运行良好。有了以上四点要求，那就不是gif图片所能完成的了。下面，我们先探讨有哪些技术可以实现我所说的功能。首先我们先准备好一张帧序列图片。如下图所示：一、使用CSS3动画。CSS3动画的 阅读全文
posted @ 2012-12-20 01:33 Minakata 阅读(4190) 评论(0) 推荐(0) 编辑
摘要：
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。 function f1(){ var n=999; }... 阅读全文
posted @ 2012-10-15 09:00 Minakata 阅读(165) 评论(0) 推荐(0) 编辑
摘要：
1、构造函数模式function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); };}var person1 = new Person("Nicholas",29,"Software Engineer");var person2 = new Person("Greg",27,"Doctor");person1.sayName(); 阅读全文
posted @ 2011-10-07 10:44 Minakata 阅读(1334) 评论(1) 推荐(1) 编辑
摘要：
调用对象当javascript解释器调用一个函数，它首先将作用域设置为定义函数的时候起作用的那个作用域链。接下来，它在作用域的前面添加一个新的对象，这叫做调用对象。调用对象用一个名为arguments的属性来初始化，这个属性引用了函数的Arguments对象。函数的命名的参数添加到调用对象的后面。用var语句声明的任何局部变量也都定义在这个对象中。既然这个调用对象位于作用域链前端，局部变量、函数参数以及Arguments对象都在函数内的作用域中。当然，这也意味着它们隐藏了作用域链更上层的任何同名的属性。函数作用域和闭包词法作用域：javascript中的函数是通过词法来划分作用域的，而不是动态 阅读全文
posted @ 2011-10-05 23:54 Minakata 阅读(340) 评论(0) 推荐(0) 编辑
摘要：
由于我们是用脚本去操控 canvas 对象，这样要实现一些交互动画也是相当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像 Flash），难免会有些限制。可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。基本动画的步骤 Basic animation steps画一帧，你需要以下一些步骤：清空 canvas 除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。保存 canvas 状态 如果你 阅读全文
posted @ 2011-10-02 15:14 Minakata 阅读(602) 评论(0) 推荐(0) 编辑
摘要：
之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用 globalCompositeOperation 属性来改变这些做法。globalCompositeOperation我们不仅可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。globalCompositeOperation = typetype 是下面 12 种字符串值之一，注意：下面所有例子中，蓝色方块是先绘制的，即“已有的 canvas 内容”，红色圆形是后面绘制，即“新图形”。source-over (d 阅读全文
posted @ 2011-10-02 12:48 Minakata 阅读(312) 评论(0) 推荐(0) 编辑
摘要：
状态的保存和恢复 Saving and restoring state在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。save()restore()save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。你可以调用任意多次 save 方法。每一次调用 restore 方法，上一个保存的状态就从堆中弹出，所有设定都恢复。save 和 restore 的应用例子我们尝试用 阅读全文
posted @ 2011-10-02 01:31 Minakata 阅读(461) 评论(0) 推荐(0) 编辑
摘要：
线型 Line styles可以通过一系列属性来设置线的样式。lineWidth = valuelineCap = typelineJoin = typemiterLimit = value我会详细介绍这些属性，不过通过以下的样例可能会更加容易理解。lineWidth 属性的例子这 个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画 布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。在下面的例子中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位。 并且，最左边的以及所有宽 阅读全文
posted @ 2011-10-01 16:52 Minakata 阅读(328) 评论(0) 推荐(0) 编辑
摘要：
到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。fillStyle = colorstrokeStyle = colortrokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。您输入的应该是符合 CSS3 颜色值标准 的有效字符串。下面的例子都表示同一种颜色。 // 这些 fillStyle 的值均为 阅读全文
posted @ 2011-10-01 16:15 Minakata 阅读(569) 评论(0) 推荐(0) 编辑
摘要：
Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是Gecko支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。引入图像 importing images引入图像只需要简单的两步：第一当然是来源图片，不是简单的 URL 路径，但可以是一个 JavaScript 的 Image 对象引用，又或者其它的 canvas 元素。然后用 drawImage 方法将图像插入到 canvas 中。先来看看第一步，基本上有四种可 阅读全文
posted @ 2011-10-01 10:20 Minakata 阅读(344) 评论(0) 推荐(0) 编辑 |
|||
