Leegorous

Img装载完毕后自动调整大小

在show图片的时候经常需要用到它,大概是大家都比较懒去为每个图调整大小,用Photoshop的批处理是可以省掉很多功夫了,但为求更省事,用脚本啦。 <img id="inu" src="your-image-path.jpg" onload = "resize(this)" /> 在页面里插一行就可以了(resize函数体在下面),如果图像是动态装载的 var img = document.createElement('img'); img.onload = resize; img.src = "http://farm4.static.flickr.com/3575/3343323074_499a81709c_o.png"; var MAX_IMAGE_SIZE = { x: 400, y: 400 }; function resize(obj) { var img = obj…

Continue reading

开始之前

<canvas>首先是在Mac OS X Dashboard上出现的,随后是safari,接着是基于Gecko的Firefox 1.5 … 而现在更被WhatWG 接纳,成为WhatWG Web applications 1.0 specification即 HTML 5 的一部分。 canvas可以用来画图,合成图像甚至是做动画,使用canvas不难,会HTML和JavaScript就可以很快的开进了。不过基本上,我觉得最终目标是动画效果和实现交互,那应该多少需要一点知识和经验,例如数学知识,颜色知识,交互经验等等……当然还需要想象力和最重要的——耐心。 之前在Canvas的奇怪变形也说过用css来定义canvas的长宽会引起变形,那个变形在不同的浏览器里面还不一样,实在无聊了可以试试,不过,最稳还是指定canvas的width和height属性。

进驻Canvas

<canvas>这个新的HTML元素的吸引力真是让我无法抵挡。在看过一些令人惊异的效果之后,canvas随即成为了最近的研究课题之一。 首先需要一个浏览器,Firefox (1.5 以上)这类基于Gecko的浏览器、Safari、Chrome和Opera都支持它, IE不支持。 在新建的页面里面加入 <canvas id="myCanvas" width="300" height="150"></canvas> myCanvas 其实只是一个容器,内容的填充就是脚本(通常是javascript)出场的时候了。 var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } 我觉得既然要测试canvas,当然不会选一个不支持它的浏览器来玩,但是检查特性是否被支持是一个良好的习惯,正式使用时大可以通过代码重构将这一些框框隐藏起来。…

Continue reading

Canvas的奇怪变形

我一般用脚本创建元素的同时多数会附加css来控制大小,背景色,etc. 但在<canvas>上却表现比较怪, var canvas = new Element('canvas', {styles: {width: '150px',height : '150px'}}); 再在上面画东西的时候居然发现变形了 我记得mozilla上面说是可以改变它的大小的 分析一下,canvas最终表现和一个png图像差不多,而它的默认大小是300/150,当应用css时,相当于宽度压缩了。 那不用css怎么办呢?其实很简单 var canvas = new Element('canvas', {width: 150,height : 150}); 诶,被css惯坏了…… 注: Element指的是mootools里的那个