HTML5 Canvas实例.docVIP

HTML5 Canvas实例 HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个上下文( context )(想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。 下面我们来看一看效果先! 上图深黑色的部分为鼠标所在区域，我们可以看到中间区域变黑。而外边颜色变为绿色。  这一张是鼠标又移动别的地方出现的效果，我们可以明显的看到外边的颜色已经发生变化。它是随着鼠标的移动颜色发生变化的。 这就是今天要说到的HTML 5 canvas。 该例子预览地址：/canvas-grad （仅支持Safari, Firefox浏览器。例子代码可通过浏览器查看源代码获得！） 原文网址: /web/Html/201005/16802.htm HTML5 Canvas及Video实例 时间:2010-05-01 这是HTML5中Canvas技术与Video技术结合的实例。效果图：  以下代码不能运行，只提供学习查看。若想预览该实例请浏览/video-canvas （浏览器支持：只支持Safari, Firefox） 原文网址: /web/Html/201005/16801.htm html5 canvas模拟loading实例 时间:2010-05-01 这个例子是html5 Canvas模拟网页loading加载实例。效果图如下：   1 (未取到网页内容) 该实例代码：（预览地址：/canvas） !DOCTYPE htmlhtml lang=en xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html;charset=utf-8 /titleHTML5 Demo: canvas/titlestylebody {　font: normal 16px/20px Helvetica, sans-serif;　background: rgb(237, 237, 236);　margin: 0;　margin-top: 40px;　padding: 0;}article, section, header, footer {　display: block;}#wrapper {　width: 600px;　margin: 0 auto;　background: #fff url(images/shade.jpg) repeat-x center bottom;　-moz-border-radius: 10px;　-webkit-border-radius: 10px;　border-top: 1px solid #fff;　padding-bottom: 76px;}h1 {　padding-top: 10px;}h2 {　font-size: 100%;　font-style: italic;}header,article *,footer a,footer p {　margin: 20px;}footer * {　margin: 20px;　color: #999;}article {　position: relative;}/stylescript// For discussion and comments, see: /2009/01/07/html5-enabling-script/(function(){if(!/*@cc_on!@*/0)return;var e = abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video.split(,),i=e.length;while (i--){document.createElement(e[i])}})()/script/headbodysection id=wrapper　　header　　　h1Canvas/h1　　/header　　article/article　　footera href=/HTML5 demo/a/footer/sectionscript src=h5utils.js/scriptscriptbuil