canvas 文字颜色_Canvas 超全教程

一、简介

是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

二、兼容性处理

1. 替换文本

元素与标签的不同之处在于，就像，，或者元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。

这非常简单：我们只是在标签中提供了替换内容。不支持的浏览器将会忽略容器并在其中渲染后备内容。而支持的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

举个例子，我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：

  current stock price: $3.15 +0.15



  

2. 检查支持性

替换内容是用于在不支持 标签的浏览器中展示的。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：

var canvas = document.getElementById('tutorial');

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

三、模版骨架

这里的是一个最简单的模板，我们之后就可以把它作为之后的例子的起点。

上面的脚本中包含一个叫做draw()的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 window.setTimeout()， window.setInterval()，或者其他任何事件处理程序来调用。

四、绘制形状

1. 栅格

在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。上一页中的HTML模板中有个宽150px, 高150px的canvas元素。如右图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。在课程的最后我们会平移原点到不同的坐标上，旋转网格以及缩放。现在我们还是使用原来的设置。

2. 渲染上下文（The rendering context）

元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl") 。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用 CanvasRenderingContext2D。

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

3. 绘制矩形

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

• fillRect(x, y, width, height): 绘制一个填充的矩形
• strokeRect(x, y, width, height): 绘制一个矩形的边框
• clearRect(x, y, width, height):清除指定矩形区域，让清除部分完全透明。
  不同于下一节所要介绍的路径函数（path function），以上的三个函数绘制之后会马上显现在canvas上，即时生效。
• rect(x, y, width, height) ：将一个矩形路径增加到当前路径上。绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。注: 当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

4. 绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

1. 首先，你需要创建路径起始点。
2. 然后你使用画图命令去画出路径。
3. 之后你把路径封闭。
4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数：

• beginPath()
  新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
  生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
• closePath()
  闭合路径之后图形绘制命令又重新指向到上下文中。不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
• stroke()
  通过线条来绘制图形轮廓。
• fill()
  通过填充路径的内容区域生成实心的图形。

注：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

4. 移动笔触

moveTo(x, y)：将笔触移动到指定的坐标x以及y上。

5. 线

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

6. 圆弧

绘制圆弧或者圆，我们使用arc()方法。当然可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。

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

注：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度=(Math.PI/180)*角度。

• arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

7. 二次贝塞尔曲线及三次贝塞尔曲线

• quadraticCurveTo(cp1x, cp1y, x, y)：绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)