php画直线 圆 矩形等基本图形方法,canvas基本图形绘制

概述

我们可以通过HTML中的canvas画布画出丰富多彩的图形甚至动画，你只需要：

在HTML中放置一个canvas标签

在HTML的JavaScript代码中获取这个canvas标签元素

通过获取的canvas元素，获取一个渲染上下文

通过获取的渲染上下文可以在画布上任意挥洒图画

另外需要注意的是，并不是所有浏览器都支持 canvas 元素，所以需要注意。

在canvas标签中可以包含浏览器不支持canvas时的显示内容

在JavaScript中通过canvas元素获取上下文时，需要检测是否获取成功

下面是一个完整列子：

更多详细内容可以参考官方文档

坐标空间

一旦创建了canvas画布之后，我们可以在画布中任意绘制，在这个画布中我们通过坐标空间来描述位置和距离。

canvas元素默认被网格所覆盖，网格中的一个单元相当于canvas元素中的一个像素。起点为左上角(坐标为(0,0))，所有元素的位置都相对于原点定位。看下面的示意图：

所以图中蓝色方形左上角的坐标为距离左边(X轴)x像素，距离上边(Y轴)y像素(坐标为(x,y))

绘制基本图形

绘制矩形

HTML中的元素canvas只有绘制矩形不需要生成路径，其他的所有图形绘制都至少需要生成一条路径。相关函数如下：

fillRect(x, y, width, height) ：绘制一个填充的矩形区域

strokeRect(x, y, width, height) ： 绘制一个矩形的边框

clearRect(x, y, width, height) ：清除指定矩形区域，让清除部分完全透明

这三个函数的参数都相同，具体说明如下：

x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标

width和height指定矩形的尺寸-宽度和长度

显示效果如下：

这三个函数一旦调用，就会立即上canvas上绘制并显示效果。

移动笔触

在canvas画布上画东西，就像用笔在纸上面画画一样，在画之前，首先需要把笔移动到纸上的某个位置才能开始画。移动的过程中并不会在纸上画下任何东西。

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

绘制路径

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

首先，你需要创建路径起始点

然后你使用画图命令去画出路径

之后你把路径封闭

一旦路径生成，你就能通过描边或填充路径区域来渲染图形

相关函数如下：

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

closePath() 闭合路径之后图形绘制命令又重新指向到上下文中

stroke() 通过线条来绘制图形轮廓

fill() 通过填充路径的内容区域生成实心的图形

rule可选，表示填充规则

可以为：非零绕组规则：nonzero和奇偶绕组法则：evenodd，默认为nonzero

需要注意的是，如果路径使用 stroke() 填充，则可以不用显式调用关闭路径 closePath() ，路径会自动闭合。但是使用 fill() 描边时必须调用closePath()。

绘制直线

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

直线的起点是当前笔触的位置，可能是前一个路径的终点或者moveTo()函数移动的点

绘制一个三角形的列子：

显示效果如下：

绘制圆弧

绘制圆弧有两个方法可以调用：

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x,y为绘制圆弧所在圆上的圆心坐标

radius为半径

startAngle以及endAngle参数用以x轴为基准弧度定义了开始以及结束的弧度

角度与弧度转换表达式：radians=(Math.PI/180)*degrees

anticlockwise为一个布尔值，指定绘制反向，默认为false表示顺时针方向。true表示逆时针方向。

arcTo(x1, y1, x2, y2, radius)

根据当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径

x1,y1指定第一个控制点的坐标

x2,y2指定第二个控制点的坐标

radius指定圆弧的半径

使用arc函数和arcTo函数的例子：

显示效果如下，其中红色为控制点，蓝色为描点(起点)：

贝塞尔曲线

通过一些控制点绘制贝塞尔曲线，从而可以绘制绘制复杂有规律的图形。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线

cp1x,cp1y为一个控制点坐标

x,y为结束点坐标

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线

cp1x,cp1y为第一个控制点坐标

cp2x,cp2y为第二个控制点坐标

x,y为结束点坐标

连续使用贝塞尔曲线绘制函数，可以绘制首尾相连的复杂曲线。看下面的例子：

显示效果如下：

绘制文本

canvas 提供了两种方法来渲染文本：

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本

绘制的文本使用当前的font, textAlign, textBaseline 和 direction

text 文本内容

x,y 指定文本起点的坐标

maxWidth 可选，绘制的最大宽度，如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放(如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理)或者使用小号的字体

strokeText(text, x, y [, maxWidth])

在指定的(x,y)位置绘制文本边框

参数和fillText()函数相同

下面是一个简单的例子：