canvas学习笔记

<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。

canvas元素

canvas也是HTML的一个元素，只有两个属性：width和height。
当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。

<canvas id="myCanvas" width="400" height="400">  </canvas>

渲染上下文

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。
<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。

var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');

代码的第一行通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。

var ctx = canvas.getContext('2d');传入一个2d值，我们就获得了2d环境的引用，并将这个环境赋予给一个变量，比如ctx。

检查支持性

通过简单的测试getContext()方法的存在可以检测浏览器是否支持canvas。

if (canvas.getContext){  var ctx = canvas.getContext('2d');  // drawing code here} else {  // canvas-unsupported code here}

坐标系

canvas的坐标系统和web的坐标系统是一致的，坐标原点（0，0）在canvas画布的左上角，x轴向右为正值，y轴向下为正值。
canvas坐标系统的单位都是px。

绘制线段

在Canvas中，线段也是路径中的一种，被称之为线性路径。
在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。

moveTo（x,y）

将笔触移动到指定的坐标x以及y上。

当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。

lineTo（x,y）

绘制一条从当前位置到指定x以及y位置的直线。

stroke（）

沿着绘制路径的坐标点顺序绘制直线

通过以上三个方法就可以绘制一条线段：

function drawScreen () {     ctx.moveTo(50, 10);     ctx.lineTo(350, 100);     ctx.stroke(); }

lineWidth

在Canvas中可以通过lineWidth来改变绘制线段的粗细。

function drawScreen () {     ctx.lineWidth = 10;    ctx.moveTo(50, 10);     ctx.lineTo(350, 100);     ctx.stroke(); }

lineWidth主要用来定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。

strokeStyle

在Canvas中可以通过strokeStyle来改变线段的颜色：

function drawScreen () {     ctx.lineWidth = 10;    ctx.strokeStyle = '#f36';    ctx.moveTo(50, 10);     ctx.lineTo(350, 100);     ctx.stroke(); }

strokeStyle主要用于设置画笔绘制路径的颜色、渐变和模式。

beginPath（）

绘制canvas路径需要一些必需的步骤：

• 创建路径起点
• 画出路径
• 封闭路径
• 一旦路径生成，可以通过描边来填充路径区域来渲染图形。

beginPath（）就用来新建一条路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。

closePath（）

如果当前的绘制路径是打开的，则关闭掉该绘制路径。
此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭（比如先调用stroke()）或者只有一个点，它会什么都不做。

在Canvas中绘制路径，最好加上beginPath()和closePath()。

function drawScreen () {     ctx.strokeStyle = '#f36';     ctx.lineWidth = 4;     ctx.beginPath();     ctx.moveTo(50, 10);     ctx.lineTo(150, 10);     ctx.lineTo(150,200);     ctx.stroke();      ctx.closePath();      ctx.beginPath();      ctx.moveTo(200,200);     ctx.lineTo(200,150);      ctx.stroke();      ctx.closePath(); }

可以看到，在关闭路径又打开路径后，实际上是绘制了两个路径。

在绘制图形路径时，一定要先调用beginPath()。 beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例如上面示例的两条直线)，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。

此外，在上面绘制折线的代码示例中，我们先调用了stroke()，再调用了closePath()。其实在调用stroke()方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用closePath()方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的closePath()是可有可无的，不过为了保持良好的习惯，还是建议写上)。
如果我们交换一下stroke()和closePath()的调用顺序，则情况完全不一样了。由于closePath()先调用，此时绘制路径并没有关闭，那么closePath()将会用直线连接当前端点和起始端点。

绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。

fillRect（x,y,width,height）

绘制一个填充的矩形

strokeRect(x, y, width, height)

绘制一个矩形的边框

clearRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

function draw() {  var canvas = document.getElementById('canvas');  if (canvas.getContext) {    var ctx = canvas.getContext('2d');    ctx.fillRect(25,25,100,100);    ctx.clearRect(45,45,60,60);    ctx.strokeRect(50,50,50,50);  }}

fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个60*60px的正方形，接着strokeRect()在清除区域内生成一个50*50的正方形边框。

路径绘制矩形

在学习绘制线段的时候，我们知道moveTo()和lineTo()可以绘制线段，如此一来，四条线就能拼出一个矩形，然后通过fill()和stroke()绘制出填充和边框矩形。

rect（x,y,width,height）

rect()也是Canvas中路径的一个方法，前面说过了，也需要配合fill()和stroke()。
其中x和y是矩形左上角的坐标点，width是矩形的宽度，height是矩形的高度。

前面我们看到的都是单独绘制边框或填充的矩形。那么将这两种结合在一起，我们就可以很容易的绘制出同时带有边框和填充色的矩形.

绘制圆和圆弧

角度和弧度

在Canvas中绘制圆或圆弧时用到的是弧度（rad）。
1 rad = 180°/π（约57.29577951°）。

弧度和角度的转换关系：

deg = (rad * 180) / Math.PIrad = (Math.PI * deg) / 180

圆弧

arc（x, y, radius, startAngle, endAngle, anticlockwise）

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

注意：arc()函数中的角度单位是弧度，不是度数。