1、canvas简介
<canvas> 是 HTML5 新增的,一个可使用脚本(一般为JavaScript)在其中绘制图像的 HTML 元素。它能够用来制做照片集或者制做简单(也不是那么简单)的动画,甚至能够进行实时视频处理和渲染。css
它最初由苹果内部使用本身MacOS X WebKit推出,供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来,有人经过Gecko内核的浏览器 (尤为是Mozilla和Firefox),Opera和Chrome和超文本网络应用技术工做组建议为下一代的网络技术使用该元素。canvas
Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码能够访问该区域,相似于其余通用的二维API,经过一套完整的绘图函数来动态生成图形。浏览器
Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。网络
2、Canvas基本使用
2.1 <canvas>元素
<canvas id="tutorial" width="300" height="300"></canvas>
1
<canvas>看起来和<img>标签同样,只是 <canvas> 只有两个可选的属性 width、heigth 属性,而没有 src、alt 属性。函数
若是不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都是px。也可使用css属性来设置宽高,可是如宽高属性和初始比例不一致,他会出现扭曲。因此,建议永远不要使用css属性来设置<canvas>的宽高。动画
因为某些较老的浏览器(尤为是IE9以前的IE浏览器)或者浏览器不支持HTML元素<canvas>,在这些浏览器上你应该老是能展现替代内容。.net
支持<canvas>的浏览器会只渲染<canvas>标签,而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。视频
用文本替换:blog