canvas(画布)

一，简介

canvas是HTML5新增的一个标签，可用于通过使用JavaScript中的脚本来绘制图形，它的默认的宽高为300 和150，创建后可随意的在画布里面进行绘制内容。

二，关于怎么使用canvas

1，创建画笔
对于要绘制canvas里面的内容，首先要做的是先创建一个画笔，然后在通过画笔在画布里面进行添加内容
如何创建画笔：

<canvas width="400" height="300"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementsByTagName('canvas')[0];
	//创建画笔
	var content = canvas.getContext('2d');
	</script>

2，绘制矩形和线段
获取画笔后，可以在画笔里面随意的进行绘制，比如一些基本的形状和一些线段可以进行绘制出来
代码演示：

    //绘制一个50*50的矩形
	content.fillStyle="#ff0000";  
    content.fillRect(10,10,50,50);
    //绘制一个的线段
    content.beginPath();
    content.moveTo(130 , 130)
    content.moveTo(40 , 150)
    content.lineTo(160 , 170)
    content.strokeStyle = 'black';
    content.stroke();

3，图片
既然canvas是一个画布,同样的也可以显示一些图片

   //上传图片
    var img = new Image();
    img.src = ''//填写图片路径
    //显示图片
    context.drawImage(img, 0 , 0);

三， 关于canvas和svg之间在技术应用区别

canvas和svg都是HTML5新增的画布属性，也是一样的可以在浏览器里面创建各种图形，因此也很难看出两个之间的区别，但是实际开发用到的时候区别还是很大的，以下我一一列举两个之间的在技术应用上的特点，细致的去了解
canvas的特点：

• canvas不依赖分辨率
• canvas支持事件处理器
• canvas最适合带有大型渲染区域的应用程序
• canvas复杂度高会减慢渲染速度
• canvas不适合游戏应用

svg的特点

• svg依赖分辨率
• svg不支持事件处理器
• svg弱的文本渲染能力
• svg能够以 .png 或 .jpg 格式保存结果图像
• svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘