2012年2月10日
Canvas Gradient
摘要： canvas的渐变分两种：线性渐变和放射渐变。线性渐变先看 fill 的例子：var gr = context.createLinearGradient(0, 0, 100, 0);gr.addColorStop(0, 'rgb(255, 0, 0)');gr.addColorStop(0.5, 'rgb(0, 255, 0)');gr.addColorStop(1, 'rgb(0, 0, 255)');context.fillStyle = gr;context.fillRect(0, 0, 100, 100);context.fillRect 阅读全文
posted @ 2012-02-10 12:57 越己 阅读(635) 评论(0) 推荐(0) 编辑
Canvas Transform
摘要： transform这东西，应该算是canvas中一个比较高级的知识点了，别看它好像没什么东西，但很多很炫的效果，都来自于它，所以我觉得还是有必要写点东西记录一下。因为有可能在进行一连串的转换后，你自己都搞不清到底转换成什么样了，每当这时候，可以首先来一句：context.setTransform(1,0,0,1,0,0);这样就重置转换了，参数是个矩阵（别问我，我只知道大概）。需要记住两点：1. Transformations are applied to shapes and paths drawn after the setTransform() or other transformati 阅读全文
posted @ 2012-02-10 00:29 越己 阅读(2203) 评论(0) 推荐(0) 编辑
2012年2月9日
Canvas Demo 1
摘要： 先看图：这个例子有三个个细节，请细看第一个path：1. 横线的lineCap不是round，而竖线是round2. 竖线比横线粗一倍3. lineJoin是个直角（也许你不觉得这是什么问题，继续往下看吧）关键的处理在于moveTo(x, y)：1. 只要保证x是0，横线的lineCap就是butt。如果移到(50, 50)，那两条线都是round了2. 只要保证y是0，竖线就会比横线粗一倍，因为lineWidth属性是以绘制的像素线为中心线的，比如从(0,10)画到(10, 10)，这条线就是中心线（不计粗细），如果lineWidth为10，那就上下各分得5px。例子中第一个path的横线y 阅读全文
posted @ 2012-02-09 21:02 越己 阅读(376) 评论(0) 推荐(0) 编辑
2012年2月7日
垂直居中
摘要： 垂直居中是个老生常谈的问题，最常见的解决办法就是设置line-height和height为相同的值，但是这个方法也不是处处适用，比如下面的例子：<!doctype html><html> <head> <title>test</title> <style type="text/css"> span { line-height:20px; height:20px; } </style> </head> <body> <span><input type= 阅读全文
posted @ 2012-02-07 15:50 越己 阅读(269) 评论(0) 推荐(0) 编辑
2012年1月9日
正则
摘要： 正则用的很普遍，本文仅针对JavaScript。创建有两种方式:1. new RegExp('表达式', '匹配模式')，这种方式的表达式中如果需要转义，转义符需要写两个，如 '\\d'2. 直接量常用属性1. $1 -> $9返回9个在模式匹配期间找到的，最近保存的部分，只读2. index返回第一次成功匹配的开始位置，只读3. lastIndex返回最后一次成功匹配的结束位置（下一次匹配开始的位置），可读写。只有当使用exec() 或 test() 时才会写入。4. lastMatch返回最后匹配的字符，只读。5. input返回查找的 阅读全文
posted @ 2012-01-09 10:55 越己 阅读(433) 评论(0) 推荐(0) 编辑
2012年1月4日
关于时间处理（更新中）
摘要： 重大提示，js的Date会处理很多数值越界的情况，比如xx.setDate(0)，内部会有容错机制，所以我下面写的某些方法完全没有意义判断某年是否为闰年：function isLeapYear(year) { if (typeof year !== 'number') { year = parseInt(year, 10); } if (year === NaN) return false; if ((year % 400 === 0) || (year % 100 !== 0) && (year % 4 === 0) ) { ret... 阅读全文
posted @ 2012-01-04 00:34 越己 阅读(343) 评论(0) 推荐(0) 编辑
2011年12月31日
读RequireJS — Module
摘要： Module 即模块，来看下RequireJS怎么定义 Module :1. 简单的名值对// Inside file my/shirt.js:define({ color: "black", size: "unisize"});2. 定义成一个Function// my/shirt.js now does setup work// before returning its module definition.define(function () { // Do setup work here return { color: "black&qu 阅读全文
posted @ 2011-12-31 21:03 越己 阅读(2110) 评论(3) 推荐(0) 编辑
2011年12月30日
读RequireJS — 加载系统
摘要： RequireJS是一个模块加载框架，所以为了最直观的感受它，我们先来看看它的加载系统。先看入口方法:/** * Does the request to load a module for the browser case. * Make this a separate function to allow other environments * to override it. * * @param {Object} context the require context to find state. * @param {String} moduleName the name of the m 阅读全文
posted @ 2011-12-30 13:23 越己 阅读(4859) 评论(2) 推荐(2) 编辑
用一个例子读懂 RequireJS
摘要： 例子来自官方，我稍微改造了一下，如下：// project.html<!DOCTYPE html><html> <head> <title>requirejs</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script data-main="scripts/main" src="scripts/require.js"&g 阅读全文
posted @ 2011-12-30 11:07 越己 阅读(9292) 评论(1) 推荐(2) 编辑
2011年12月28日
A hack for "for in"
摘要： for in 用于遍历对象的可枚举属性，如:var obj = {a: 1};for (var prop in obj) { alert(prop);}只会打印 "a"显然属性a是可枚举属性，那什么是不可枚举属性呢？通过JavaScript代码添加到对象的属性是可枚举的，而内部对象的预定义属性（或方法）通常是不可枚举的，如toString(), valueOf()等。通常遍历对象属性会这么做：var obj = {a: 1};for (var prop in obj) { if (obj.hasOwnProperty(prop)) { alert(prop); }}这样可以 阅读全文
posted @ 2011-12-28 17:57 越己 阅读(252) 评论(0) 推荐(0) 编辑