风骚的 Canvas
| 前言
在HTML5来临之前，大多数网页上比较绚丽的效果都是借助图片来完成，这种方法可以实现需求，但是这种图片的方式是以“低性能为代价换取来的”，这往往不是最佳的实践方案。
我们都知道HTML5的发布带来了许多更加有用的东西，其中就包括一个特殊的标签 Canvas， Canvas是一种使用JS在html文档中绘制图形图像的一种技术。
推荐书籍《Web前端开发精品课：HTML5 Canvas开发详解》
1.1 canvas与svg 的区别：
-
Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。
-
Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢量”的，不适用于像素处理和静态描述，图形放大不会影响质量。也就是说，使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”。
-
每次发生修改，Canvas需要重绘，而SVG不需要重绘。
-
Canvas与SVG的关系，简单来说，就像“美术与几何”的关系一样
1.2 canvas的使用步骤：
-
获取canvas对象，作为操作绘制图形图像的容器
-
获取context上下文，所有canvas 的方法都是基于context 来进行使用的
-
绘制图形图形
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="demo" width="400" height="500"></canvas>
<!-- 不要通过css去设置canvas画布，可以使用js -->
<script>
// 第一步
var canvas = document.getElementById('demo') //获取canvasdom对象
canvas.style.border = '1px solid red'
//第二步
var cvsCtx = canvas.getContext('2d') //获取canvas上下文用于操作canvas api,2d声明为2d画布，3d使用threejs
// 第三步
cvsCtx.moveTo(100, 100); //设置画笔起始位置
cvsCtx.lineTo(200, 100); //表示画一条直线
cvsCtx.stroke(); //描边
</script>
</body>
</html>
在浏览器中的呈现形式
注意事项：getContext("2d") 方法在canvas中只能获取2d对象，不能获取3d，3d对象需要对 webgl等有一定的了解，有兴趣的可以了解一下 threeJS,入门3d的世界。
这些就是最近本canvas使用步骤，下一章 如何 使用canvas绘制 直线图形。
