Articles with html

Chrome,为什么第二张图片看不见呢?

Chrome,为什么第二张图片看不见呢?

在测试的时候,建立一个最小测试集对于测试调试是很有帮助的。 为了测试与图片装载相关的内容,建立了下面的页面。内容很简单,就是动态添加两个 IMG。 <html> <head> <title>Test Loading IMG</title> <style>body { background-color: #00F; }</style> </head> <body> <script> function show() { for (var i = 0; i < 2; i++) { var img = new Image(); img.src…

Continue reading

DIV Background Bug in IE

也不是第一次拿 IE 说事了,不过这次 IE 的 bug 还是有点意思的,也看到过有人提及这个 bug,解决的方法就是在CSS里设置它的 width 或者 height,要看具体的应用场景了,好像下面的这个例子。 <div class="composite"> <div class="item">AAA</div> <div class="item">BBB</div> <div class="item">CCC</div> <div class="item">DDD</div> </div> <style type="text/css"> .composite { background-color:#CCC; padding: 0 0 0 40px; } .item {…

Continue reading

绘制直线

在了解 如何绘制 canvas 里唯一的基本形状——矩形 之后,现在可以转入使用路径了。路径不仅仅是线条,只是习惯性的会从线条开始,而直线可算是最简单的线条了。 使用路径,是有套路的。 创建、绘制、关闭和填充或者勾勒形状。 beginPath() // actual drawing closePath() stroke() fill() 两点确定一条直线,在 canvas 里也不例外的。 lineTo(x, y) x, y 只是终点的坐标,起点坐标是隐含的,并且取决于前一操作。简单来说,上一操作的终点就是当前直线的起点。新建 canvas 时起点就是原点。另外还可以通过这个方法: moveTo(x, y) 来移动起始坐标。moveTo 顾名思义就是移动坐标用的,它一般用于重设起始坐标,大多数情况下路径都不是起于原点的,而且在绘制一些不连续的路径时非常有用。 var x = 60; var y =…

Continue reading

Canvas中的矩形

在canvas的世界里,只有一种基本图形——矩形,听起来很难以想象啊,复杂的图形怎么办呢?很多时候复杂问题总有简单的解法的。杀手锏就是路径,用路径和路径组合就可以绘制出相当复杂的图形,很浓重的矢量味道噢。像在 Illustrator 这类矢量设计软件里,路径就是一切的基础。是不是意味着,canvas 同样是矢量世界呢? 还是先搞定仅有的一种基本图形吧。最简单不过下面三个函数: // 绘制一个方块 fillRect(x,y,width,height) // 绘制一个矩形轮廓 strokeRect(x,y,width,height) // 清出一个透明的矩形区域 clearRect(x,y,width,height) 其中x,y是矩形区域左上角的位置。 function draw() { var canvas = document.getElementById('myCanvas');; if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(15, 15, 120, 120); ctx.clearRect(40, 40,…

Continue reading

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里的那个