深度辨析IE10对HTML5 Canvas支持及实例教程(一)
日期：2014-05-16 浏览次数：20834 次
深度剖析IE10对HTML5 Canvas支持及实例教程(一)
什么是HTML5？
HTML5 是用于取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML标准版本，HTML5有两大特点，强化了 Web 网页的表现性能和追加了本地数据库等 Web 应用的功能。HTML5 的第一份正式草案已于 2008 年 1 月 22 日公布，现在 HTML5 仍处于完善中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
Html5和IE10你应该了解
你一定听说过HTML5，因为大家都在谈论它；也一定听说过Internet Explorer 10 和 Windows 8，可能你已经体验过了，那么它究竟好在哪儿？究竟能带来什么？Internet Explorer 10 和Windows 8 是微软即将发布的全新操作系统和浏览器，其中加入了在WP8 上表现出色的Modern UI（也就是我们常说的 Metro 风格），并且之后即将发布的 WP8 系统，都对 HTML5 有着很好的支持，并且在开发上也更加便利。
Internet Explorer 10 比较于 Internet Explorer 9 支持更多更酷的 HTML5 特性，如 application cache, Css 3D transform, web socket 等，硬件加速图形功能也很出色，因此可以很流畅地支持 HTML5 网站。如果你的网站可以兼 Internet Explorer 10，那么它不仅能够在其他高级浏览器上运行顺畅，更棒的是，对于 Windows 8 的用户，可以直接将网站 Pin 到开始屏幕中，简单的开发就能使网站像应用一样获得 Windows 8 的系统级功能支持， 如 Notification，实现与 Windows 8 的深度整合，增加更多的商业机会。
有消息称,在微软内部，包括Windows和IE都在采用HTML5进行开发，微软相关负责人表示从三年前开始开发Win8时，微软就制定了基于HTML5基础之上的策略。从IE8开始，微软就逐步在浏览器中增加对HTML5的支持。
关于IE10对CSS3样式支持，笔者早前已经进行测试，并总结给出实例教程，详见
详解IE10 下CSS3 3D变换(3D transfrom)及实例教程
IE10 下CSS3选择器及动画(animation)效果实例教程
完美实现 IE10 下利用HTML5实现文件上传（图片上传）功能
今天笔者满怀崇敬的心情，来进行IE10下HTML5 Canvas使用和学习,本文将分为几部分进行讲解,主要内容会涉及到:HTML5中Canvas颜色、渐变、图像处理、绘制等
HTML5和Canvas
HTML5 增加了大量提升用户体验的功能标准：canvas 元素可以让开发者在一个特定区域内绘制各种复杂图形，同时可以用 javascript 控制你所绘的图形的动效，使得非 flash 的丰富的视觉效果成为可能，用户在移动端和 PC 端可以享受到一致的视觉体验；试想一个你曾经使用过的网络应用程序，一个在线图片编辑程序，你会用它做简单的图片处理，但绝对不会拿它代替 PhotoShop，因为它的交互性、响应率和功能性都远不及本地用程序。
10下Canvas绘图入门实例
下面的这段代码应该算是雏形，不管用HTML5的Canvas做些什么，这些语句总是需要的，所以保存下来，要用的时候就复制一下好了。
效果图:
上述代码中<canvas id="myCanvas">your browser does not support the canvas tag</canvas>，则是HTML5中新引入的Canvas元素，这个使用方法基本是固定的，给一个id方便后面的javascript调用，然后指定宽和高，画面总要在一片小天地中展示出来，如果不指定，似乎浏览器会给一个默认的尺寸，往往不是我们需要的。另外，当浏览器不支持html的canvas标签时，则给出提示：
现在咱用幼儿园小孩都懂的话语详细解释一下上面的js：首先，取出Canvas元素，使用的是DOM的getElementById方法，当然有些情况下也可以用getElementByTagName，前者简单一些（少打很多字不是么）。一旦取出了Canvas元素，我们得对它check一番，这个世界上总是充满了恐怖的未知，什么确认工作都不做会给我们带来意想不到的麻烦。! canvas检查是否存在这个元素，! canvas.getContext检查浏览器是否支持Canvas。当不满足上面条件的时候，这里只是简单的退出代码，当然你也可以给一个漂亮点的提示。getContext方法是HTML5中新引入的Canvas的一个方法，在Internet Explorer中，是由excanvas.js预先准备好这个方法的。
getContext方法，暂时只接受一个“2d”参数，比较高级的浏览器有3d支持，写作“webgl”，到时候再讲了。一旦使用了这个参数，你可以认为现在ctx中存储了2d的context对象，或者简单点就是一块画布，以后所有的绘制操作都在这块画布上进行。
Canvas的坐标系
一、HTML5中的Canvas使用之颜色
现在为止我们画的图形都是黑色的，这是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。
ctx.strokeStyle = color—— 指定绘制线的颜色
ctx.fillStyle = color—— 指定填充的颜色
实例源码:
什么是HTML5？
HTML5 是用于取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML标准版本，HTML5有两大特点，强化了 Web 网页的表现性能和追加了本地数据库等 Web 应用的功能。HTML5 的第一份正式草案已于 2008 年 1 月 22 日公布，现在 HTML5 仍处于完善中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
Html5和IE10你应该了解
你一定听说过HTML5，因为大家都在谈论它；也一定听说过Internet Explorer 10 和 Windows 8，可能你已经体验过了，那么它究竟好在哪儿？究竟能带来什么？Internet Explorer 10 和Windows 8 是微软即将发布的全新操作系统和浏览器，其中加入了在WP8 上表现出色的Modern UI（也就是我们常说的 Metro 风格），并且之后即将发布的 WP8 系统，都对 HTML5 有着很好的支持，并且在开发上也更加便利。
Internet Explorer 10 比较于 Internet Explorer 9 支持更多更酷的 HTML5 特性，如 application cache, Css 3D transform, web socket 等，硬件加速图形功能也很出色，因此可以很流畅地支持 HTML5 网站。如果你的网站可以兼 Internet Explorer 10，那么它不仅能够在其他高级浏览器上运行顺畅，更棒的是，对于 Windows 8 的用户，可以直接将网站 Pin 到开始屏幕中，简单的开发就能使网站像应用一样获得 Windows 8 的系统级功能支持， 如 Notification，实现与 Windows 8 的深度整合，增加更多的商业机会。
有消息称,在微软内部，包括Windows和IE都在采用HTML5进行开发，微软相关负责人表示从三年前开始开发Win8时，微软就制定了基于HTML5基础之上的策略。从IE8开始，微软就逐步在浏览器中增加对HTML5的支持。
关于IE10对CSS3样式支持，笔者早前已经进行测试，并总结给出实例教程，详见
详解IE10 下CSS3 3D变换(3D transfrom)及实例教程
IE10 下CSS3选择器及动画(animation)效果实例教程
完美实现 IE10 下利用HTML5实现文件上传（图片上传）功能
今天笔者满怀崇敬的心情，来进行IE10下HTML5 Canvas使用和学习,本文将分为几部分进行讲解,主要内容会涉及到:HTML5中Canvas颜色、渐变、图像处理、绘制等
HTML5和Canvas
HTML5 增加了大量提升用户体验的功能标准：canvas 元素可以让开发者在一个特定区域内绘制各种复杂图形，同时可以用 javascript 控制你所绘的图形的动效，使得非 flash 的丰富的视觉效果成为可能，用户在移动端和 PC 端可以享受到一致的视觉体验；试想一个你曾经使用过的网络应用程序，一个在线图片编辑程序，你会用它做简单的图片处理，但绝对不会拿它代替 PhotoShop，因为它的交互性、响应率和功能性都远不及本地用程序。
10下Canvas绘图入门实例
下面的这段代码应该算是雏形，不管用HTML5的Canvas做些什么，这些语句总是需要的，所以保存下来，要用的时候就复制一下好了。
<!DOCTYPE HTML>
<html>
<head><title>深度剖析IE10对HTML5 Canvas支持及实例教程-liwei3gjob</title></head>
<body>
深度剖析IE10对HTML5 Canvas支持及实例教程-liwei3gjob<br>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,400,300);
</script>
</body>
</html>效果图:
上述代码中<canvas id="myCanvas">your browser does not support the canvas tag</canvas>，则是HTML5中新引入的Canvas元素，这个使用方法基本是固定的，给一个id方便后面的javascript调用，然后指定宽和高，画面总要在一片小天地中展示出来，如果不指定，似乎浏览器会给一个默认的尺寸，往往不是我们需要的。另外，当浏览器不支持html的canvas标签时，则给出提示：
现在咱用幼儿园小孩都懂的话语详细解释一下上面的js：首先，取出Canvas元素，使用的是DOM的getElementById方法，当然有些情况下也可以用getElementByTagName，前者简单一些（少打很多字不是么）。一旦取出了Canvas元素，我们得对它check一番，这个世界上总是充满了恐怖的未知，什么确认工作都不做会给我们带来意想不到的麻烦。! canvas检查是否存在这个元素，! canvas.getContext检查浏览器是否支持Canvas。当不满足上面条件的时候，这里只是简单的退出代码，当然你也可以给一个漂亮点的提示。getContext方法是HTML5中新引入的Canvas的一个方法，在Internet Explorer中，是由excanvas.js预先准备好这个方法的。
getContext方法，暂时只接受一个“2d”参数，比较高级的浏览器有3d支持，写作“webgl”，到时候再讲了。一旦使用了这个参数，你可以认为现在ctx中存储了2d的context对象，或者简单点就是一块画布，以后所有的绘制操作都在这块画布上进行。
Canvas的坐标系
一、HTML5中的Canvas使用之颜色
现在为止我们画的图形都是黑色的，这是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。
ctx.strokeStyle = color—— 指定绘制线的颜色
ctx.fillStyle = color—— 指定填充的颜色
实例源码:
<!DOCTYPE HTML>
<html>
<head><title>liwei3gjob-深
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
