canvas是html5新增的一个元素，配合宽度和高度属性定义出一个可绘图的区域，JavaScript可以访问该区域，通过一套完整的绘图函数来动态生成图形。canvas的应用包括绘制图形、绘制图表、制作动画效果、进行游戏开发等
总结：本质上canvas是一个html5元素，需要通过JavaScript来操作才能实现各种功能，只是一个canvas元素没有实际效果
1.2.canvas绘制图形步骤使用canvas来绘制图形通常需要经过下面三步：
1. 需要有一个canvas标签，通过js来获取到canvas对象2. 获取到上下文对象3. 使用函数来绘图实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #cvs{ border: 1px solid #ddd; } </style></head><body> <canvas width="500" height="300" id="cvs"></canvas> <script> // 1. 获取到canvas对象 var oCanvas = document.getElementById('cvs') // 2. 获取到上下文环境 var ctx = oCanvas.getContext('2d') // 3. 开始绘制图形 // 3.1.把路径移动到画布中的指定点，不创建线条。 ctx.moveTo(100, 100) // 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条 ctx.lineTo(200, 100) // 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径，即 描边 ctx.stroke() </script></body></html> 1.3.css中设置宽高图像会被拉伸的问题如果在css中去设置canvas的宽高，画出来的图形会被拉伸
<style> #cvs{ border: 1px solid #ddd; width: 600px; height: 300px; }</style><canvas id="cvs"></canvas>效果如图：
从上图中我们可以看出，画出来的图形比在canvas标签上设置宽高属性这种方式要更粗
最佳实践：设置canvas宽高的时候最好的方式就是在canvas元素身上加宽高属性，而不是在css中去设置canvas元素的宽高，这是因为canvas中还有一个绘图表面，我们绘制的图形实际上是绘制在绘图表面上的，用css去设置canvas元素的宽高，并不能同时设置好绘图表面的宽高（这里的宽高默认300*150）
1.4.2d绘图环境canvas元素其实只是绘图环境的一个容器，真正要实现各种图形的绘制需要依靠绘图环境对象，这个环境对象提供了全部的绘制功能。目前，我们使用的是2d的绘图环境，这个2d的绘图环境对象提供了强大的api，如下
canvas : 指向该绘图环境所属的canvas对象 fillstyle : 指定改绘图环境后续的图形填充操作中所使用的颜色、渐变或图案 font : 设置字型 globalAlpha : 全局透明度设定 globalCompsiteOperation : 将某个物体绘制到其他物体之上时的绘制方式 lineCap : 绘制线段的端点 lineWidth : 绘制线段的宽度 lineJoin: 绘制两条线段相交时的焦点 miterLimit : 绘制miter形式线段的焦点 shadowBlur : 延伸的阴影效果 shadowColor : 阴影颜色 shadowOffsetX : 阴影水平偏移量 shadowOffsetY : 阴影垂直方向偏移量 strokeStyle : 对路径进行描边时所用的绘制风格 textAlign : 文本水平对齐方式 textBaseline : 文本垂直对齐方式---------------------这些属性可以通过控制台查看
//获取到canvas对象var oCanvas = document.getElementById("canvas");//获取到canvas的绘图环境var oContext = oCanvas.getContext("2d"); console.log(oContext)
课程地址：http://edu.nodeing.com/course/80