|
|||
10 2011 档案
摘要：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
摘要：调用对象当javascript解释器调用一个函数，它首先将作用域设置为定义函数的时候起作用的那个作用域链。接下来，它在作用域的前面添加一个新的对象，这叫做调用对象。调用对象用一个名为arguments的属性来初始化，这个属性引用了函数的Arguments对象。函数的命名的参数添加到调用对象的后面。用var语句声明的任何局部变量也都定义在这个对象中。既然这个调用对象位于作用域链前端，局部变量、函数参数以及Arguments对象都在函数内的作用域中。当然，这也意味着它们隐藏了作用域链更上层的任何同名的属性。函数作用域和闭包词法作用域：javascript中的函数是通过词法来划分作用域的，而不是动态
阅读全文
posted @ 2011-10-05 23:54
摘要：由于我们是用脚本去操控 canvas 对象，这样要实现一些交互动画也是相当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像 Flash），难免会有些限制。可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。基本动画的步骤 Basic animation steps画一帧，你需要以下一些步骤：清空 canvas 除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。保存 canvas 状态 如果你
阅读全文
posted @ 2011-10-02 15:14
摘要：之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用 globalCompositeOperation 属性来改变这些做法。globalCompositeOperation我们不仅可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。globalCompositeOperation = typetype 是下面 12 种字符串值之一，注意：下面所有例子中，蓝色方块是先绘制的，即“已有的 canvas 内容”，红色圆形是后面绘制，即“新图形”。source-over (d
阅读全文
posted @ 2011-10-02 12:48
摘要：状态的保存和恢复 Saving and restoring state在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。save()restore()save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。你可以调用任意多次 save 方法。每一次调用 restore 方法，上一个保存的状态就从堆中弹出，所有设定都恢复。save 和 restore 的应用例子我们尝试用
阅读全文
posted @ 2011-10-02 01:31
摘要：线型 Line styles可以通过一系列属性来设置线的样式。lineWidth = valuelineCap = typelineJoin = typemiterLimit = value我会详细介绍这些属性，不过通过以下的样例可能会更加容易理解。lineWidth 属性的例子这 个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画 布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。在下面的例子中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位。 并且，最左边的以及所有宽
阅读全文
posted @ 2011-10-01 16:52
摘要：到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。fillStyle = colorstrokeStyle = colortrokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。您输入的应该是符合 CSS3 颜色值标准 的有效字符串。下面的例子都表示同一种颜色。 // 这些 fillStyle 的值均为
阅读全文
posted @ 2011-10-01 16:15
摘要：Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是Gecko支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。引入图像 importing images引入图像只需要简单的两步：第一当然是来源图片，不是简单的 URL 路径，但可以是一个 JavaScript 的 Image 对象引用，又或者其它的 canvas 元素。然后用 drawImage 方法将图像插入到 canvas 中。先来看看第一步，基本上有四种可
阅读全文
posted @ 2011-10-01 10:20
摘要：贝塞尔和二次方曲线Bezier and quadratic curves接下来要介绍的路径是贝塞尔曲线，它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)上面两行代码的区别见右图。它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。参数 x 和 y 是终点坐标，cp1x 和 cp
阅读全文
posted @ 2011-10-01 09:29
|
|||
浙公网安备 33010602011771号