canvas

一、简介

在新的HTML标准HTML5中Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建丰富的图形引用。

canvas 元素本身是没有绘图能力的 （它仅仅是图形的容器）。所有的绘制工作必须在 JavaScript 内部完成 。

二、兼容性

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

 三、实例

<canvas id="myCanvas" width="200" height="100"></canvas>

<script type="text/javascript">
    //绘制矩形
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
</script>

 

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

getContext() 方法返回一个用于在画布上绘图的环境。 返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。

 

<script type="text/javascript">
//渐变背景
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

 

<script type="text/javascript">
//插入图片
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

四、

Canvas适用场景：Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制

SVG适用场景：SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景

 

参考：

http://www.w3school.com.cn/tags/html_ref_canvas.asp