首先说明下这里说的遮罩不是大家平常所谓的遮罩层\lightbox之类的效果,而是跟flash中的遮罩层类似的效果,也就是在一个层上覆盖一个遮罩层,只有这个遮罩层有内容的地方,下面那个层的内容才会显示出来,而且透明度也会起作用,感觉上说来有种反相的感觉,遮罩层上显示的地方下面的层就显示,遮罩层没有内容的地方下面的层就不显示,而不是被遮罩层盖住.

我们利用webkit中新增的一个css属性可以来实现这个效果:

-webkit-mask

这个属性可以在某个层上显示一个遮罩,关于此属性的具体文档,请跳转:

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-mask

下面举个简单的例子来说明:

下面有两个图,左边是实例图,右边的图则将作为一个遮罩层附加到左边的图上,点击后就可以看到效果(务必使用最新版chrome或者safari4.0以上浏览器)

看了这个例子应该就可以理解什么是遮罩了.

我们发现这种遮罩实现的时候必须要一个图片才行,是不是觉得很麻烦呢,如果在程序中要多次改变遮罩形状,岂不是麻烦死了,于是我们就用canvas来实现一个动态设置的遮罩,当然不要对这个效果的期望太高,因为遮罩的渲染是不连续的,不要梦想用这个实现动画的遮罩,只是这种方法可以免去图片的烦恼,也可以自定义一些形状.只要你把这些形状画在canvas里就可以.

原理并不神奇,canvas元素有一个好用的方法,那就是:

toDataURL()

这个方法会把当前canvas里的图形转换成DATAurl格式的图片编码,然后…

我们把这串编码赋给css里的url()里就可以了…是不是很简单…
下面是个例子,在页面上点击,canvas就会重新绘制一个图形,然后作为遮罩,注意中间会闪一下,这就是瓶颈…
希望有人可以用的着这个效果…

canvas · mask · 遮罩

这是一个demo而已,利用了canvas的一些绘图api,一个向量类来实现物理效果模拟和碰撞检测

地址:http://www.beiju123.cn/demo/m/version0.0.1/canvas/canvas-demo.html

对电脑配置要求较高,不要使用ie浏览

canvas · 物理模拟 · 碰撞检测

效果和源码:(本代码使用了本人自己的js框架,自己修改代码的话,请务必引用我试用的框架,否则会出现错误)

(请务必试用非ie浏览器浏览,极力推荐Safari和chrome,其他浏览器运行速度堪忧)

http://www.beiju123.cn/blog/wp-content/uploads/2010/02/canvas-demo.html

1.什么是canvas:

引用Firefox开发者中心的一段话:<canvas> is a new HTML element which can be used to draw graphics using scripting (usuallyJavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas>implementations which we will see later in this tutorial.

注意,canvas主要是用来画图的,而不是注重动画,所以在canvas中没有帧的概念,没有精灵(Sprite)的概念,flash中的概念在canvas中很多都不存在.

canvas说白了,就是给js加了几个对象,多了几个方法.并不是一个独立的东西,应该说是JavaScript的一点点补充.就跟其他编程语言中的graphic对象差不多,提供了画基本图形和路径,图像,提供了颜色和样式管理.

更多关于canvas的基础,见https://developer.mozilla.org/en/Canvas_tutorial(英文版)

可能很多人会嚼的我这篇文章纯属多余,既然能够画图,那加上一个定时器不就是动画了嘛?

是的,如果你只是想在画布上画出一个圆或者矩形,然后让它动起来的话,那这么做无疑是可以得出结果的.代码也很简单,如下:

var x=0;
    var y=0;
    var ctx = document.getElementById('canvas').getContext('2d');
    setInterval(function(){
        ctx.clearRect(0,0,800,800);//清除画布某某个范围内的内容,参数分别为x,y,宽度,高度
        ctx.fillStyle = '#FFF'//设置颜色
        ctx.fillRect(x++,y++,50,50)//画一个矩形,参数为:x,y,宽,高
    })

效果就是一个方块在画布上向右下角移动.

动画往往不是如此简单,在flash里,复杂的动画里会包含很多元素,有剪辑,有精灵,他们之间还有包含关系,我们可以单独控制某个元素的移动,控制速度,控制属性.flash里有帧,我们可以在帧上放置元素,控制帧速.最重要的,做复杂的动画的时候,我们需要把每个元素抽象成一个完整的对象,例如:一个人对象啊,我们需要控制它走动,控制它攻击.

可是在canvas里面,图形并不是一个对象,在整个canvas元素里,有且只有只有一个画布的对象(多次创建的话,只会创建一个引用),如果想把里面的图形作为对象来控制的话,上面的动画方法就做不到了.这个时候,考虑一下flash的工作原理,我想出了如下的解决方案.

我们现在需要一种新的方法,这种方法可以让画布上的元素变成可以单独控制的对象.而画布上其实只有一个对象,怎么让它能承载多个动画对象呢?

我们想想flash的工作原理吧,flash中最基本的两个东西,一个是帧,一个是精灵(Sprite).下面我们就给我们的动画程序添加这两个概念.

首先是帧,我们通过一个定时器,每隔一段时间就重画一下画布,在这段时间里我们改变画布上的元素的位置,这样就是最基本的帧了.

然后现在问题就是如何控制画布上元素的属性呢?我们把画布上所有要用到的动画元素都抽象出来,每个元素都抽象成一个对象,这个对象拥有位置和大小,速度等信息.然后在每一帧重画画布的时候,我们遍历这些对象,调用它们自己的draw方法,让它们根据自己的属性把自己画到画布上.我们将这些元素统称为Sprite,也就是动画精灵.

现在,我们就可以控制这些动画元素了,因为它们都被抽象成了对象,可以有自己的属性和方法,他们都要实现一个接口.虽然在js中不存在接口的概念,但是我们要自己去衡量在每个扩展的精灵里是否都实现了接口的方法.因为这些方法都是必须的.我们把这个接口定义成如下的样子: (全文…)

canvas · flash · html5 · 动画