QbatyBlog

现在来看看用canvas来绘制一张已经存在的图片

var canvas = document.getElementById('example2');
var ctx2 = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx2.drawImage(img,0,0);
}
img.src = "img.jpg";

ctx2.drawImage(img,0,0) 是在画布(0,0)的位置上画出img.jpg这张图像，当img没有完全载入的时候，drawImage已经执行会导致后面的脚本全部停止运行，所以给了img一个onload事件来保证drawImage的时候已经完全载入了img。
Read More…

实现以上图形的代码如下
Read More…

canvas元素 翻译过来是 画布，帆布
最早在苹果浏览器中引进，逐渐普及成HTML5的 标准Element 这个元素的具体参见可以看
这里
通过canvas我们可以在浏览器中画出很多不规则或是规则的图形
如何画呢？
在HTML5的标准里看到DOM接口的描述

Read More…

原文标题：《Functions as Namespaces, and How to Peek Inside》
原文地址：http://www.davidflanagan.com/2009/11/functions-as-na.html

把函数做为命名空间已经是当今javascript编程里非常普遍的了。如果你把你的代码包含在一个函数里，那么你的代码里包含的变量和函数对于包含函数是本地的，或者说是局部的，这样则不会扰乱全局作用域。

var value = (function() {  // Wrapper function creates a local scope or namespace
    // your code goes here
    return value;  // Export a value from the namespace
})());  // Invoke the wrapper function to run your code

例如，现在假设你刚刚用XMLHttpRequest获得了一段字符串形式的javascript代码。你打算去执行这下代码，你可能会想要在一个命名空间里去执行这段代码，这样执行代码的过程中就不会产生全局的变量或是函数。
这很简单，只要在执行前把这段代码包含进一个函数里。在这个情况下，构造函数Function() 比起eval() 更加得心应手。 Read More…

今天Youyee发给我一段代码，是关于给DOM绑定事件的三种方法，让我说出三种方法的不同
我想了一会，愣是没说个明白。Youyee解释过后就明白，在这里做些笔记

var Event = {};
//方法一 runtime
Event.addEventListener = function(obj, eventType, listener){
	if(typeof window.addEventListener === 'function') {//DOM2接口
		el.addEventListener(type, fn, false);
	} else if(typeof document.attachEvent === 'function') {//IE
		el.attachEvent('on' + type, fn);
	} else {//DOM0接口
		el['on' + type] = fn;
	}
};

//方法二 initialize
if(typeof window.addEventListener === 'function') {//DOM2接口
	Event.addEventListener = function(el, type, fn) {
		el.addEventListener(type, fn, false);
	};
} else if(typeof document.attachEvent === 'function') {//IE
	Event.addEventListener = function(el, type, fn) {
		el.attachEvent('on' + type, fn);
	};
} else {//DOM0接口
	Event.addEventListener = function(el, type, fn) {
		el['on' + type] = fn;
	};
}

第一种方法，还记得是很早之前写的，第一个datagrid或是排序table，就是用了这个绑定方法。不足之处在于只要用到这个函数就需要对DOM判断一遍，开始判断一遍是不是更好呢？
Read More…