canvas画板

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

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

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

一道js题目

昨天在微博上看到一个js的题目:

我们来分析一下:
b是一个引用对象,并不是false这个直接量。
!操作符可以应用于ECMAScript中的任何值,无论这个值是什么数据类型,这个操作符都会返回一个布尔值。这道题中的操作数是一个对象,返回false。
==操作符,会做自动转换后判断。而===只在两个操作数未经转换就相等的情况下返回true。

canvas+video=背景视频

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

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

html和css代码:

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

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