自从有了博客,每年差不多这个时候都会在博客弄点下雪的效果。嗯,最近北京好冷啊,还好有女朋友送的围巾和毛衣, n:-gg 暖和啊…北京最近是干冷干冷的,每天的风还大的不得了,越发的刺骨了,就是不见下雪啊,听说武汉都下雪了。 阅读全文>>
一般情况下,在一个form表单中如果存在一个input标签的type值为submit,那么直接敲回车键这个表单就提交了。且,一般情况下,网页中切换焦点都是使用Tab键来控制,顺序则由标签的index属性值来控制。 阅读全文>>
想模拟腾讯微博的网页登录呢,结果没成功,暂时还没找到原因,我觉得应该没问题了啊,记录下来,等有空了继续折腾。 阅读全文>>
继续玩JavaScript CanvasRenderingContext2D。前面画出来的都是“死”的,下面结合前面两个例子做一个“动”态时钟。当然还是得先了解一下即将用到的一些新属性及方法。 阅读全文>>
可别看这张脸简单啊,你要知道这里面可是用了平面几何中的圆啊!(π值你能背到第几位?)所以必须得知道圆的定义:1.平面上到定点的距离等于定长的点的集合叫圆,2.平面上一条线段,绕它的一端旋转360°,留下的轨迹叫圆,另外还得知道坐标系以及CanvasRenderingContext2D提供的方法。 阅读全文>>
看到旁边的图,如果要问是怎么画的,估计第一反应是Photoshop,其实这是用JavaScript在canvas标签上通过CanvasRenderingContext2D对象画出来的。接下来看看如果通过JavaScript画出这张图来。
首先需要了解以下知识:
HTML中用于脚本画图的canvas元素
目前Firefox 1.5, Safari 1.3,及Opera 9以上版本都支持此元素,鸟IE都出8了,还是不支持,想在IE上看可以安装http://excanvas.sourceforge.net来模拟效果。
- 属性
- height默认值300
- width默认值300
- 方法
- getContext()返回一个CanvasRenderingContext2D对象用于在canvas上绘图,你必须传入字符串参数“2d”
CanvasGradient
可以将该对象赋值给CanvasRenderingContext2D对象的strokeStyle及fillStyle属性。CanvasRenderingContext2D对象的createLinearGradient()及createRadialGradient()返回类型均为CanvasGradient。
该对象的addColorStop(float offset, String color)方法可以改变指定点的颜色。该方法至少要使用一次,否则绘图将是透明的。
CanvasRenderingContext2D.createRadialGradient( )
- 方法介绍
- CanvasGradient createRadialGradient(float xStart, float yStart, float radiusStart, float xEnd, float yEnd, float radiusEnd)
- 参数
- xStart, yStart
- 起始圆圆心坐标
- radiusStart
- 起始圆半径
- xEnd, yEnd
- 结束圆圆心坐标
- radiusEnd
- 结束圆半径
- xStart, yStart
- 返回值
- 一个CanvasGradient对象
样例
以下是实现上图效果的JavaScript代码:
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var radial = ctx.createRadialGradient(60, 75, 0, 100, 75, 60); radial.addColorStop(0, '#000'); radial.addColorStop(0.5, 'red'); radial.addColorStop(1, '#999'); ctx.fillStyle = radial; ctx.stroke(); ctx.fillRect(0, 0, 200, 150);
声明:本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版,均为个人理解,略有删改,切勿完全信以为真,走火入魔。因本文引起的一切后果,读者自负,与本人无关。
JavaScript使用嵌套函数实现闭包
我们知道,在JavaScript中函数可以被嵌套,可以被用做数据,并且使用语法作用域的交互来实现令人惊奇且强大的效果。 阅读全文>>
声明:本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版,均为个人理解,略有删改,切勿完全信以为真,走火入魔。因本文引起的一切后果,读者自负,与本人无关。
如JavaScript变量作用域一文所说,JavaScript函数体的执行是局部作用域的。接下来我们将解释一些作用域问题以及JavaScript闭包。 阅读全文>>
声明:本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版,均为个人理解,略有删改,切勿完全信以为真,走火入魔。因本文引起的一切后果,读者自负,与本人无关。
我们知道在JavaScript编程中,函数可以当作数据来使用。typeof运算符应用于函数时将返回“function”,然而,JavaScript中的函数是一有特点的。当函数当作对象时,它同样有属性及方法,就像Date和RegExp对象一样。 阅读全文>>


