博客下雪吧

2010.12.17 / 标签: , / 分类: JavaScript
20°

自从有了博客,每年差不多这个时候都会在博客弄点下雪的效果。嗯,最近北京好冷啊,还好有女朋友送的围巾和毛衣, n:-gg 暖和啊…北京最近是干冷干冷的,每天的风还大的不得了,越发的刺骨了,就是不见下雪啊,听说武汉都下雪了。 阅读全文>>

JavaScript回车切换焦点

2010.07.02 / 标签: / 分类: JavaScript
10°

一般情况下,在一个form表单中如果存在一个input标签的type值为submit,那么直接敲回车键这个表单就提交了。且,一般情况下,网页中切换焦点都是使用Tab键来控制,顺序则由标签的index属性值来控制。 阅读全文>>

Java模拟腾讯微博的网页登录失败

2010.06.23 / 标签: / 分类: Java技术
19°

想模拟腾讯微博的网页登录呢,结果没成功,暂时还没找到原因,我觉得应该没问题了啊,记录下来,等有空了继续折腾。 阅读全文>>

JavaScript动态时钟

2010.04.26 / 标签: , / 分类: JavaScript
Sofa

JavaScript dynamic clock

JavaScript dynamic clock


继续玩JavaScript CanvasRenderingContext2D。前面画出来的都是“死”的,下面结合前面两个例子做一个“动”态时钟。当然还是得先了解一下即将用到的一些新属性及方法。 阅读全文>>

JavaScript绘制笑脸

2010.04.23 / 标签: , / 分类: JavaScript

smile face

smile face


可别看这张脸简单啊,你要知道这里面可是用了平面几何中的圆啊!(π值你能背到第几位?)所以必须得知道圆的定义:1.平面上到定点的距离等于定长的点的集合叫圆,2.平面上一条线段,绕它的一端旋转360°,留下的轨迹叫圆,另外还得知道坐标系以及CanvasRenderingContext2D提供的方法。 阅读全文>>

JavaScript CanvasRenderingContext2D在canvas上绘图

2010.04.22 / 标签: , / 分类: JavaScript
Sofa

canvas

canvas

看到旁边的图,如果要问是怎么画的,估计第一反应是Photoshop,其实这是用JavaScript在canvas标签上通过CanvasRenderingContext2D对象画出来的。接下来看看如果通过JavaScript画出这张图来。
首先需要了解以下知识:
HTML中用于脚本画图的canvas元素
目前Firefox 1.5, Safari 1.3,及Opera 9以上版本都支持此元素,鸟IE都出8了,还是不支持,想在IE上看可以安装http://excanvas.sourceforge.net来模拟效果。

  1. 属性
    • height默认值300
    • width默认值300
  2. 方法
    • getContext()返回一个CanvasRenderingContext2D对象用于在canvas上绘图,你必须传入字符串参数“2d”

CanvasGradient

可以将该对象赋值给CanvasRenderingContext2D对象的strokeStyle及fillStyle属性。CanvasRenderingContext2D对象的createLinearGradient()及createRadialGradient()返回类型均为CanvasGradient。

该对象的addColorStop(float offset, String color)方法可以改变指定点的颜色。该方法至少要使用一次,否则绘图将是透明的。

CanvasRenderingContext2D.createRadialGradient( )

  1. 方法介绍
    • CanvasGradient createRadialGradient(float xStart, float yStart, float radiusStart, float xEnd, float yEnd, float radiusEnd)
  2. 参数
    • xStart, yStart
      • 起始圆圆心坐标
    • radiusStart
      • 起始圆半径
    • xEnd, yEnd
      • 结束圆圆心坐标
    • radiusEnd
      • 结束圆半径
  3. 返回值
    • 一个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库

2010.04.14 / 标签: / 分类: JavaScript

外面有一批流行的JavaScript库,如jQueryExtJSDojo等。通过下面的一个简单的框架,我们也可以构建出属于自己的JavaScript库。 阅读全文>>

JavaScript闭包

2010.04.13 / 标签: / 分类: JavaScript
Sofa

声明:本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版,均为个人理解,略有删改,切勿完全信以为真,走火入魔。因本文引起的一切后果,读者自负,与本人无关。

JavaScript使用嵌套函数实现闭包

我们知道,在JavaScript中函数可以被嵌套,可以被用做数据,并且使用语法作用域的交互来实现令人惊奇且强大的效果。 阅读全文>>

JavaScript函数作用域链

2010.04.13 / 标签: / 分类: JavaScript
Sofa

声明:本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版,均为个人理解,略有删改,切勿完全信以为真,走火入魔。因本文引起的一切后果,读者自负,与本人无关。

JavaScript变量作用域一文所说,JavaScript函数体的执行是局部作用域的。接下来我们将解释一些作用域问题以及JavaScript闭包。 阅读全文>>

JavaScript函数属性和方法

2010.04.12 / 标签: / 分类: JavaScript

声明:本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版,均为个人理解,略有删改,切勿完全信以为真,走火入魔。因本文引起的一切后果,读者自负,与本人无关。

我们知道在JavaScript编程中,函数可以当作数据来使用。typeof运算符应用于函数时将返回“function”,然而,JavaScript中的函数是一有特点的。当函数当作对象时,它同样有属性及方法,就像Date和RegExp对象一样。 阅读全文>>

无觅相关文章插件,快速提升流量