{finalbug} » HTML5 http://finalbug.org Keep it simple & stupid Sun, 05 Feb 2012 13:27:46 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 HTML5的Canvas学习笔记 http://finalbug.org/2011/07/canvas_in_html5-2/ http://finalbug.org/2011/07/canvas_in_html5-2/#comments Mon, 25 Jul 2011 12:56:51 +0000 Tang Bin http://www.finalbug.org/?p=2687 大部分内容翻译整理自《HTML5&CSS3 in the real world》（by Alexis Goldstein, Louis Lazaris, and Estelle Weyl, Copyright © 2011 SitePoint Pty. Ltd.）一书中的第11章。

通过JS和canvas，我们现在可以在web上画出很多有趣和有用的东西。这里的内容仅限于Canvas 2D绘图。

按照当前（2011年7月）的情况，支持Canvas 2D绘图的浏览器有：

  • Safari 2.0+
  • Chrome 3.0+
  • Firefox 3.0+
  • Internet Explorer 9.0+
  • Opera 10.0+
  • iOS (Mobile Safari) 1.0+
  • Android 1.0+

canvas和SVG的比较

canvas的特点：

  • 可以进行像素级操作；
  • 一次成型，不可以动态修改。如果要对已有的canvas进行修改，必须重绘；（canvas使用immediate mode）
  • 不能通过DOM模型访问canvas中的内容；
  • 可以将canvas的内容保存成PNG或JPEG文件；

SVG的特点：

  • 可以通过DOM模型访问SVG的内容；（SVG使用retained mode）
  • 目前你可以使用一些工具来生成SVG（例如Raphaël library和Inkscape）；
  • 和canvas相比，SVG可被当作是一种文件格式而不是一些列用来绘图的方法；
  • 不可进行像素级操作；

总的来说，如果和Flex相对应，canvas类似于bitmap和bitmapData，用于位图处理；SVG类似于Sharp/Sprite等，用于矢量图处理和事件操作等。

canvas绘图的一般方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="jquery.js"></script>
		<script>
			// 这里我使用jquery的方法让document加载完成之后再执行
			// 也可以直接写在body的onload或类似的方法之内
			$(document).ready(function(){
				draw();
			});

			function draw()
			{
				// 获取canvas及其context
				// 基于webGL的支持，将来可能会有3D的context支持
				// 不过目前浏览器对webGL的支持似乎并不理想
				var canvas = document.getElementById("can");
				var context = canvas.getContext("2d");

				// 绘制颜色填充
				context.strokeStyle = "red"; // 设定填充边框的颜色
				context.fillStyle = "rgba(0, 0, 255, 0.5)"; // RBGA值，red，blue，green，alpha
									// 也可以使用RGB值，即没有alpha
				context.fillRect(10,10,100,100); // 绘制填充，和Flex的rectangle不同，这里的值依次是：x0, y0, x1, y1。后两个值不是width和height。
				context.strokeRect(120,10,100,100); // 绘制边框，同上

				// 绘制过渡填充
				var g = context.createLinearGradient(300, 300, 300, 500); // x0, y0, x1, y1
				// 注意，这里的过渡值设定的范围是按照整个canvas来确定的
				// 而不是针对要绘制的区域。
				// 方法createRadialGradient(x0, y0, r0, x1, y1, r1);可用来绘制放射过渡填充
				g.addColorStop(0, "blue");
				g.addColorStop(1, "red");
				context.fillStyle = g;
				context.fillRect(300, 300, 200, 200);

				// 绘制弧度路径。canvas没有提供绘制圆的方法，用这个绘制弧度的方法来绘制圆。
				context.beginPath();
				// arc用来设定路径属性
				context.arc(50, 50, 30, 0, Math.PI * 2, true); // x, y, radius, startAngle, endAngle, anticlockwise
				context.closePath();
				context.strokeStyle = "red";
				context.fillStyle = "blue";
				context.lineWidth = 3;
				context.fill(); // 用设定的style直接填充path
				context.stroke(); // 同上，直接绘制边框

				// 添加文字
				canvas.style.backgroundColor = "transparent";
				context.fillStyle = "blue";
				context.textAlign = "left";
				context.font = "24px Georgia, Verdana";
				// 后两个参数是文字的起始坐标。
				context.fillText("some words to display", 50, 20);

				// 用图片填充
				var img = new Image();
				img.src = "E2.jpg";
				img.onload = function()
				{
					var p = context.createPattern(img, "repeat");
					context.fillStyle = p;
					context.fillRect(100, 100, 200, 200);
				}
			}
		</script>
		<style>
			#can
			{
				border: dotted 2px black;
			}
		</style>

	</head>

	<body>
		<!-- 创建canvas标签是必须的 -->
		<canvas id="can" width="500" height="500">
			<!--
			这里可以添加一些提示信息
			如果用户的浏览器不支持canvas
			这的文字就将被显示出来以提醒用户
			-->
			not support
		</canvas>
	</body>
</html>
]]> http://finalbug.org/2011/07/canvas_in_html5-2/feed/ 0 读完第一本HTML5书《HTML5用户指南》 http://finalbug.org/2011/03/readhtml5intro/ http://finalbug.org/2011/03/readhtml5intro/#comments Wed, 16 Mar 2011 03:26:08 +0000 Tang Bin http://www.finalbug.org/?p=2492

在一个月的时间内断断续续的粗略的读完了第一本关于HTML5的书：《HTML5用户指南》，感觉还是颇有收获。写几点自己的感觉。

有遇到一些朋友问HTML5是啥，按我的理解来说，HTML5是一系列的规范，它规定了浏览器在遇到什么内容的时候应该做什么样的处理。比如一些新的标签，一些新的input的类型，以及更多的JavaScript API等等。通过http://html5test.com/的测试，Firefox 3.6的分数是155，后来我升级到Firefox 4.0 RC，得分是240。不过综合看来下，目前还是chrome对HTML5的支持是最好的。

最有吸引力的新特性在网上已经有很多了，大概就是video和audio标签，canvas画布，本地存储和web socket等。给我的感觉是：

1，video和audio的确很好，不过支持的格式不统一，目前似乎各浏览器都支持的只有ogg；
2，canvas的功能和API和ActionScript的绘图API很接近，包括简单的动画等等，不过在Firefox下，一些使用canvas的例子的运行并不太好；
3，本地存储是个挺有趣的东西，存储的大小似乎并没有统一的标准，不过完全可以代替cookies，有点类似于ActionScript中的本地SharedObject。另外一个就是web SQL，似乎目前也没有支持的浏览器；
4，有个新鲜的东西叫web worker，主要的功能是可以让JavaScript多线程执行，这样就不会因为JavaScript繁忙导致浏览器假死了，挺好；
5，web socket是我最期盼的东西，但是书中没有涉及到服务器相关的内容。

总的来说，真本书还算不错，解答了很我之前我感觉模糊的东西，有一些不错的例子，在实际开发中可能会有所帮助。不过等HTML5标准正式颁布，等所有浏览器都支持HTML5了，可能还会有更多变数吧。就我自己来说，学习和关注的技术重点将逐渐的从Flex/Flash/ActionScript向HTML5/CSS3/JavaScript转移了。还是那句话，让Flash静静的走开吧。

HTML5用户指南 [平装]
作者：罗森(Bruce Lawson)，夏普(Remy Sharp)
译者：刘红伟，等
出版社: 机械工业出版社; 第1版 (2011年1月1日)
外文书名: Introducing HTML 5
平装: 192页
正文语种: 汉语, 英语
开本: 16
ISBN: 9787111322788, 7111322789

]]> http://finalbug.org/2011/03/readhtml5intro/feed/ 0 HTML5的官方logo http://finalbug.org/2011/01/html5%e7%9a%84%e5%ae%98%e6%96%b9logo/ http://finalbug.org/2011/01/html5%e7%9a%84%e5%ae%98%e6%96%b9logo/#comments Wed, 19 Jan 2011 00:23:12 +0000 Tang Bin http://www.finalbug.org/?p=2033

这是W3C于2011年1月18日发布的HTML5官方logo，官方说：

It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It’s the standard’s standard, a pennant for progress. And it certainly doesn’t use tables for layout.

“它真切而有力，就像你创作的模型那样具备强大的适应能力和普遍性。它就如同你这样富有前瞻性的网络开始者，光彩夺目，星光闪耀。它是标准的标准，它是创新的典范。它当然不会再去使用样式表格。”

实际上，我觉得它有点丑……

]]> http://finalbug.org/2011/01/html5%e7%9a%84%e5%ae%98%e6%96%b9logo/feed/ 0 debian, dropbox, and more http://finalbug.org/2010/05/debian-dropbox-and-more/ http://finalbug.org/2010/05/debian-dropbox-and-more/#comments Wed, 12 May 2010 12:07:54 +0000 Tang Bin http://www.finalbug.org/wp/?p=979 将debian下的chrome升级到最新的beta版本以后，终于能够同步了。这问题也着实奇怪，PC上的debian还存在的时候，s10和PC上的安装配置完全一样，但是PC上的chrome可以同步，s10上的就不可以。

dropbox终于还是惨遭毒手，时间是2010年5月11日。我已经不记得以前那些受到邪恶组织迫害的牺牲者逝去的日子了，而我也终将不会再记得dropbox的忌日，有太多的人和事将逝去，而只要他们存在一天，这样的事情就不会停止。

关于adobe，flash，apple和html5的争吵似乎已经愈演愈烈，而目前有很多的公司和组织站在html5的一边。其实关于flash这一点，我?是很早就已经开始反感的。因为即便是flex SDK开源之后，我要在linux平台下开发和使用flex，flash都显得非常的不友好。虽然一直看好RIA的概念，但是却始终对swf平台颇有不满。而现在我想我已经有了更好的选择，放弃swf平台是迟早的事情，不在于apple是否接受flashplayer，也不在于adobe是否开放flash——只在于我自己的选择。这一次我站在adobe的对面。

]]> http://finalbug.org/2010/05/debian-dropbox-and-more/feed/ 0 一些HTML5的例子 http://finalbug.org/2010/04/%e4%b8%80%e4%ba%9bhtml5%e7%9a%84%e4%be%8b%e5%ad%90-2/ http://finalbug.org/2010/04/%e4%b8%80%e4%ba%9bhtml5%e7%9a%84%e4%be%8b%e5%ad%90-2/#comments Thu, 22 Apr 2010 12:13:20 +0000 Tang Bin http://www.finalbug.org/wp/?p=985 最近一直在关注HTML5相关的东西。除了很早就知道的video、canvas、websocket之类的东西外，原来还有很多非常让人震惊的东西。我想我应该更多的关注这个据说要2022年才会正式发布的技术。关于Flash RIA和HTML5之间的关系和取舍，我也需要更仔细的考虑一下了。

留几个网站。

http://paulirish.com/work/gordon/demos/
http://mrdoob.com/projects/chromeexperiments/google_gravity/
http://balldroppings.com/js/
http://mrdoob.com/projects/chromeexperiments/ball_pool/
http://internetris.net/
http://www.canvasdemos.com/2009/04/03/colorscube/

以上网站建议使用chrome浏览器运行。

－－－－－－－－

终于还是在家里的PC机上安装了debian。机器上有2快硬盘，一块320G，一块500G，500G的硬盘是当初买来装下载的电影的。后来下载了180G的MJ的MV和演唱会、等等一堆东西。前几天一直忙着将这些东西从500G的硬盘上清理出去。昨天终于清理完成，于是在线安装了debian。在s10上运行的是debian＋xfce，在PC上装上了gnome。如果用不习惯了再换回去。hehe～

]]> http://finalbug.org/2010/04/%e4%b8%80%e4%ba%9bhtml5%e7%9a%84%e4%be%8b%e5%ad%90-2/feed/ 0