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