canvas画板

之前对HTML5 Canvas API进行了一个简单的介绍,今天我写了一个简单的画板,可以选择画笔颜色噢,话不多说,赶紧动手画画吧!

提示:你可以先修改部分代码再运行。

有关CanvasRenderingContext2D 对象的属性可以参考w3school

canvas+video=背景视频

你可能学过<video>和<canvas>这两个标签,那有没有想过这两个标签结合起来使用呢。其实,两个标签结合使用可以发生有趣的事情。下面来看一个简单的实例。

我们给<video>标签设置了两个属性controls和loop。controls是向用户显示控件,比如播放按钮,loop是循环播放。在<video>标签中包含3个子元素<source>,每一个引用一段不同编码格式的视频,来兼容不同的浏览器。
不知道大家有没有用过在windows桌面播放视频,有些播放器可以支持这个功能。接下来我们就用<video>和<canvas>模拟这个有趣的功能。

html和css代码:

我们让视频在浏览器中居中,并让canvas布满浏览器,把canvas元素放在前面是让他在视频的底下,来达到背景播放的效果。
js代码:

这段js代码很简单,添加一个播放事件,在canvas上画出播放时的放大画面,效果如下:
Continue reading →

HTML5 Canvas API

<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和一些复杂的)动画。<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

当我们在页面中添加一个<canvas>元素时,它就在页面中创建了一个矩形区域。这个矩形区域默认宽为300px高为150px,当然,我们也可以自定义它的宽和高并设置这个元素的属性。<canvas>看起来很像<img>,唯一不同就是它不含src和alt属性。下面演示添加在HTML页面中的<canvas>元素。

Continue reading →