深度剖析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做些什么，这些语句总是需要的，所以保存下来，要用的时候就复制一下好了。

　　<!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-深度剖析IE10对HTML5 Canvas支持及实例教程</title></head><body>深度剖析IE10对HTML5 Canvas支持及实例教程-liwei3gjob<br><canvas id="myCanvas">your browser does not support the canvas tag </canvas><script type="text/javascript">function draw() {var canvas = document.getElementById('myCanvas');if ( ! canvas || ! canvas.getContext ) { return false; }var ctx = canvas.getContext('2d');ctx.beginPath();ctx.fillStyle = 'rgb(192, 80, 77)'; // 红ctx.arc(70, 45, 35, 0, Math.PI*2, false);ctx.fill();ctx.beginPath();ctx.fillStyle = 'rgb(155, 187, 89)'; // 绿ctx.arc(45, 95, 35, 0, Math.PI*2, false);ctx.fill();ctx.beginPath();ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫ctx.arc(95, 95, 35, 0, Math.PI*2, false);ctx.fill();}draw();</script></body></html>

指定透明度

设定透明度有两种方法:

1)普通方法设置

和普通的CSS中一样，我们指定颜色的时候还可以带一个alpha值（不过用的不多，IE9之前都不支持）。

例如:ctx.fillStyle = 'rgba(192, 80, 77, 0.7)';

2)使用全局方式设置透明度

上面我们给每一个圆加了0.7的alpha值，不过我们每个圆的alpha都是一样的，每个都写一遍未免有些麻烦（说是我没觉得麻烦……只不过不这么说就没法引出这个新功能啊：）

ctx.globalAlpha = alpha这个参数指定了全局的alpha值，这么设定之后，所有画的图案都会有这么点的透明，除非你又特别指定了。

例如:ctx.globalAlpha = 0.7; //设置透明度

效果图如下：

实例代码:

　　<!DOCTYPE HTML><html><head><title>liwei3gjob-深度剖析IE10对HTML5 Canvas支持及实例教程</title></head><body>深度剖析IE10对HTML5 Canvas支持及实例教程-liwei3gjob<br><canvas id="myCanvas">your browser does not support the canvas tag </canvas><script type="text/javascript">function draw() {var canvas = document.getElementById('myCanvas');if ( ! canvas || ! canvas.getContext ) { return false; }var ctx = canvas.getContext('2d');ctx.globalAlpha = 0.7; //设置透明度ctx.beginPath();ctx.fillStyle = 'rgb(192, 80, 77)'; // 红ctx.arc(70, 45, 35, 0, Math.PI*2, false);ctx.fill();ctx.beginPath();ctx.fillStyle = 'rgb(155, 187, 89)'; // 绿ctx.arc(45, 95, 35, 0, Math.PI*2, false);ctx.fill();ctx.beginPath();ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫ctx.arc(95, 95, 35, 0, Math.PI*2, false);ctx.fill();}draw();</script></body></html>

二、HTML5中的Canvas使用之径向渐变

什么是径向渐变?

又要解释一下什么叫径向渐变，其实就是环形的渐变了，由圆心（或者是较小的同心圆）开始向外扩散渐变的效果，听着有些抽象，往下看图一下子就明白了。线性渐变指定了起点和终点，径向渐变则指定了开始的结束园的圆心和半径。这里使用createRadialGradient来获得Canvas的CanvasGradient对象，所以addColorStop方法也是通用的。

CanvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)

起始的圆的圆心为(x0, y0)半径为r0，终了的圆的圆心为(x1, y1)半径为r1。如果半径为负数，INDEX_SIZE_ERR异常发生，而圆心半径都相等的话，理所当然的，没有渐变效果了（相信没人会这么做的）。的使用方法，首先是利用createRadialGradient方法指定渐变的首末圆得到CanvasGradient对象，再对这个对象使用addColorStop方法指定各个位置的颜色。最后，将CanvasGradient对象作为fillStyle使用，反正和LinearGradient一回事儿就是了。

效果见左图，这个“面包圈”的中心在(70, 70)处，内部半径为20，外部半径为70。然后定义的渐变为从小圆到大圆，分别为红、黄、蓝。我们这里是画了一个矩形，但是因为填充的是圆形，所以最终效果看起来是圆的。

Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中。在此之前，人们要想实现动态的网页应用，只能借助于第三方的插件，比如Flash或Java，而引入了Canvas标记后，人们直接打通了通往神奇的动态应用网页的大门。本教程内容只覆盖了一小部分、但却是非常重要的canvas标记的应用功能——图像显示和处理。

HTML5中的Canvas之图像处理(本例来源自网络,本文收集整理)

最常见的在canvas上画图的方法是使用Javascript Image对象。所支持的来源图片格式依赖于浏览器的支持，然而，一些典型的图片格式(png，jpg，gif等)基本上都没有问题。

图片可以从DOM中已经加载的元素中抓取，也可以按需即时创建。

// 抓取页面上已有的图片。
var myImage = document.getElementById(‘myimageid’);//或创建一个新图片。

myImage = new Image();

myImage.src =‘image.png’;

大多数支持canvas标记的浏览器的当前版本中，当图片还没有加载完成时，如果你要去画它，结果是什么事情都不会发生。也就是说，如果你想画一个图片，你需要等它完全加载。你可以使用图片对象的onload函数来进行判断。

// Create an image.

myImage = new Image();

myImage.onload =function(){
// Draw image.
}

myImage.src =‘image.png’;

在下面的所有例子中，我们的图片源将会使用这个256×256尺寸的大猩猩。

基本绘画

在最基本的画图操作中，你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法，图像可以简单的以其原尺寸被画在画布上。

drawImage(image, x, y)

var canvas= document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,50,
50);

ctx.drawImage(myImage,125,
125);

ctx.drawImage(myImage,210,
210);

缩放及调整尺寸

改变图像的尺寸，你需要使用重载的drawImage函数，提供给它希望的宽度和高度参数。

drawImage(image, x, y, width,height)

var canvas= document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,50,
50, 
100,100);

ctx.drawImage(myImage,125,
125, 
200,50);

ctx.drawImage(myImage,210,
210, 
500,500);

这个例子演示了如何画一个比原图小的图像，一个不同长宽比的图像和一个比原图大的图像的方法。

图像裁剪

最后一个drawImage方法的功用是对图像进行裁剪。

drawImage(image,

sourceX,

sourceY,

sourceWidth,

sourceHeight,

destX,

destY,

destWidth,

destHeight)

参数很多，但基本上你可以把它想成从原图中取出一个矩形区域，然后把它画到画布上目标区域里。

var canvas= document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,0,
0, 
50,50,
25, 
25,100,
100);

ctx.drawImage(myImage,125,
125, 
100,100,
125, 
125,150,
150);

ctx.drawImage(myImage,80,
80, 
100,100,
250, 
250,220,
220);

这些就是HTML5中的canvas(画布)标记里进行绘图和处理图像的基本操作。绘图只是canvas能提供的功能之一，将来我们会发布更多的关于这方面的教程，会介绍关于这个标记的更多的特征和功能。如果你有任何的问题和想法，请在下面评论的写出来

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

c# winform notifyIcon 系统托盘图标闪动气泡提示
private Icon ico1 = new Icon("1.ico");private Icon ico2 = new Icon("2.ico");//透明的图标 private void button1_Click(object sender, EventArgs e){timer1.Interval = 500;timer1.Start();}private void Form1_Load(object sender, EventArgs e){th…...
2024/4/21 8:36:49
代码生成器介绍
1:CodeSmith一款人气很旺国外的基于模板的dotnet代码生成器官方网站:http://www.codesmithtools.com 官方论坛：http://forum.codesmithtools.com/default.aspx 版权形式：30天试用开源：否需要先注册确认后才能下载2:MyGeneratorMyGenerator是又一个国外很不错的代码生成工…...
2024/4/21 8:36:49
第一阶段研究工作总结
从三月十五号到今天过去了两个工作日。当初的研究任务主要有三项：液位测量确定软件程序设计、声源定位dsp开发板制版、调试液晶和触摸屏板。第一个周的工作很顺利。各项进展同步，液位测量程序设计有序进行，并进行了阶段性的数据信号测量；dsp开发板原理图设计，包括电源设计…...
2024/4/21 8:36:47
Flash MX as声音控制分解
[1b]教程前言：[/1b] 　　FLASH声音被广泛应用在网页、MTV、片头等FLASH动画当中。一段美好的音乐会给你的动画添加更多的精彩。声音的控制便成了必不可少的部分。本教程为大家从基础知识、简单示例到最后的实例制作，一步一步为大家讲解声音控制的方法。　　各位在做实例的时候…...
2024/4/21 8:36:46
Python 多线程抓取网页
最近，一直在做网络爬虫相关的东西。看了一下开源C++写的larbin爬虫，仔细阅读了里面的设计思想和一些关键技术的实现。 1、larbin的URL去重用的很高效的bloom filter算法； 2、DNS处理，使用的adns异步的开源组件； 3、对于url队列的处理，则是用部分缓存到内存，部分写入文件…...
2024/4/21 8:36:45
C#NotifyIcon类把程序最小化到右下角托盘
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace NotifyIcon托盘 {public partial class Form1 : Form{public Form1(…...
2024/4/20 18:27:10
java代码生成器，springboot代码生成器，加入oracle支持
续接上一篇博客，今天生成器又加入了oracle的支持，界面做了些许的微调，先看一下效果吧比之前好看了一点点吧，然后我们进行oracle配置在这里随便选了公司局域网oracle数据库中的一张表，名字有点长，然后点击数据项配置在这里对交互进行了优化，因为首次连接数据库有时会花费…...
2024/4/25 22:45:56
听觉神经网络（二）：听觉通路
听觉系统中的脑干、中脑和皮层之间有多种并行和重叠的通路。它们具有并行，同时重叠和相互关联的功能。此外，听觉信号的分析处理阶段并不像视觉系统那样可以被清晰地分离或理解。因此，很难使用简单的功能框架来帮助理解听觉系统的结构与功能。听觉外周的信息传导通路听觉外…...
2024/4/20 18:27:06
DNS tunnel的原理及实战
DNS tunnel的原理及实战摘自：http://netsec.ccert.edu.cn/zhengming/2011/11/01/%E8%BD%AC%E8%BD%BD%EF%BC%9Adns-tunnel%E7%9A%84%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE%9E%E6%88%98/什么是DNS tunnel？ DNS tunnel 即 DNS隧道。从名字上来看就是利用DNS查询过程建立起隧道，传…...
2024/4/20 18:27:05
NotifyIcon用法
-------------------控件NotifyIcon-----------//客户端调用 private void btnShowError_Click(object sender, EventArgs e) { string error = "程序出错"; BubbleHelper.Instance.SetBubbleTime(1000, error); }//提取的气泡提…...
2024/4/21 8:36:44
语音增强与降噪
目前，语音信号处理已经从传统的信号处理发展到深度学习方法，基本上所有的问题都有了对应的深度学习方法，可以说深度学习无孔不入、遍地开花。之所以有需求，还是因为问题的存在。特别是在直播中，噪声的问题更为严重。比如啸叫问题，玩游戏当中也会出现，令人反感，体验不佳…...
2024/4/21 8:36:43
DNS隧道工具使用不过其网络传输速度限制较大
DNS隧道工具使用 http://www.freebuf.com/sectool/112076.html http://netsec.ccert.edu.cn/zhengming/2011/11/01/%E8%BD%AC%E8%BD%BD%EF%BC%9Adns-tunnel%E7%9A%84%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE%9E%E6%88%98/ https://wenku.baidu.com/view/84d8c843b307e87100f69605.ht…...
2024/4/21 8:36:43
[CDN]阿里云直播开发使用教程（php鉴权代码示例）
因为自己有业务需要用到阿里云直播，感觉阿里云直播再直播延迟方面做得比较小，然后更好的支持自己对直播管理功能，于是自己对阿里云直播的流程、鉴权方式进行了一些分析，这里分析给大家。本代码示例配套有视频教程！阿里云直播使用教程1-阿里云直播鉴权播放点击播放fl…...
2024/4/21 8:36:41
Shell_NotifyIcon 删除托盘图标后右下角图标没有立即消失
转载，原文地址：http://blog.sina.com.cn/s/blog_7bddd8530100w85n.html 今天一时想解决我们公司某个工具箱软件的托盘图标删除后不自动消失的问题，发现网上也有很多网友发这样的质疑，但都没有比较确切的回答：通常在程序退出时调用以下代码便可以删除托盘图标：NOTIFYI…...
2024/4/21 8:36:40
Java代码生成器：1分钟提供增删改查api，由世界上最好的语言pyhton编写
用世界上最好的语言python编写的Java代码生成器，私人订制，模版任意设置，使用此代码生成器1分钟可以迅速完成增删改查全部功能，并提供api接口。本项目为Spring + Mybatis + mysql + dubbo代码生成器，但只要增加模版便可以完成你的私人订制代码生成器，不限语言。本项目已包…...
2024/4/21 8:36:39
麦克风阵列波束形成
原文转载于：http://blog.csdn.net/shichaog/article/details/74143427 有所修改感谢作者波束形成beamforming 体现的是声源信号的空域选择性，许多传统波束形成方法具有线性处理结构；波束形成需要考虑三个方面： 1.麦克风阵列个数；2.性能；3.鲁棒性在麦克风较少时，波束…...
2024/4/21 8:36:38
Larbin简介,及其在Ubuntu10.04下的编译安装
Larbin是一种多功能的网络爬虫,一个法国人最初为XYLEME project写的,当时只是为了获取网络上的XML文件.Larbin是非常灵活可订制的. 最新版本的Larbin在一台普通的PC上一天可爬到5,000,000个网页,当然这很大程序上依赖于你的网速.Larbin工作于linux上,并且依赖于一些标准库,比如…...
2024/4/21 8:36:37
我的springboot代码生成器
spring-boot-code-generator项目背景项目地址：https://gitee.com/johndengjiajun_admin/springboot-code-generator我记得是刚毕业出来的时候，接触到好几个项目，发现每次开发后台管理模块的时候，发现都是做的事情都是一样的，做的逻辑都是一样的，只是业务不一样而已，并…...
2024/4/21 8:36:37
windows下的托盘编程(Shell_NotifyIcon)
添加和删除托盘图标 BOOL AddNotificationIcon(HWND hwnd) {NOTIFYICONDATA nid = {sizeof(nid)};nid.hWnd = hwnd;// add the icon, setting the icon, tooltip, and callback message.// the icon will be identified with the GUIDnid.uFlags = NIF_ICON | NIF_TIP | NIF_M…...
2024/4/21 8:36:35
【Audio音频兴趣拓展】麦克风阵列_阵列结构
光有优秀的算法，采集硬件支持还不够，还需要有优秀的麦克风支架设计技术。传声器阵列是由一定数量的传声器按照一定的空间几何位置排列而成的。阵列参数包括传声器的数目，阵列的孔径大小，传声器阵元间距，传声器的空间分布形式等几何参数；另外还包括指向性，波束宽度，最大…...
2024/4/21 8:36:34