canvas 基础用法与绘制形状_convas 绘制方法

<canvas>是一个可以使用脚本（通常为javascript）来绘制图形的HTML元素。它可以制作图片构图、绘制图表或者简单的动画，如下图：

除一些过时的浏览器不支持<canvas>元素外，所以的新版本主流浏览器都支持它。Canvas的默认大小为宽300像素x高150像素。

01 基础用法

<canvas>元素

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

<canvas>看起来和<img>元素很像，唯一的不同是它并没有src和alt属性。实际上，<canvas>标签只有两个属性：width和height。

渲染上下文（The rendering context）

<canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。

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

代码的第一行为id为myCanvas的<canvas>元素得到DOM对象。

一旦有了元素对象，我们可以通过使用它的getContext()方法来访问绘画上下文。

一个简单的例子：

<canvas id="myCanvas" width="300" height="150"></canvas><script type="text/javascript">  function draw(){    let canvas = document.getElementById('myCanvas');    if(canvas.getContext){ // 检查浏览器是否支持canvas标签      let ctx = canvas.getContext('2d');                ctx.fillStyle = "red";      ctx.fillRect(10, 10, 50, 50);                ctx.fillStyle = "rgba(0, 0, 200, .5)";      ctx.fillRect(30, 30, 50, 50);    } else {      //canvas-unsupported code here    }  }  draw();</script>

执行draw函数后，我们将得到下面这样的图像：

02 绘制形状

接下来，我们可以深入了解如何在canvas上绘制矩形，三角形，圆弧和曲线。

绘制物体到canvas前，需掌握路径，我们看看到底怎么做。

画布栅格(canvas grid)

在我们开始画图之前，我们需要了解一下画布栅格以及坐标空间。

如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元格相当于canvas元素中的一像素。

栅格的起点为左上角，坐标为（0,0）。所有元素的位置都相对于原点定位。

所以图中蓝色方形左上角的坐标为距离左边x像素，距离上边y像素，左标为（x, y）。

绘制矩形

<canvas>只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。

所有其他类型的图形都是通过一条或者多条路径组合而成。拥有众多路径生成的方法让复杂图形的绘制成为了可能。

首先，我们回到矩形的绘制中。canvas提供了三种方法绘制矩形：

   1，绘制一个填充的矩形

fillRect(x, y, width, height)

    2，绘制一个矩形的边框

strokeRect(x, y, width, height)

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

clearRect(x, y, width, height)

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

还是一个简单的例子​​​​​​​

function draw(){  let canvas = docment.getElementById('myCanvas');  if(canvas.getContext){    let ctx = canvas.getContext('2d');        ctx.fillRect(20, 20, 100, 100);    ctx.clearRect(40, 40, 60, 60);    ctx.strokeRect(50, 50, 50, 50);  }}

执行函数以后，得到下面的图形：

fillRect()函数绘制了一个坐标为（20, 20），边长为100px的黑色正方形，

clearRect()函数从坐标（40，40）开始，擦除了一个60x60px的正方形，

strokeRect()函数从坐标（50,50）开始，绘制了一个50x50px的正方形边框。

不同于接下来要介绍的路径函数（path function）,以上的三个函数绘制之后会马上显现在canvas上，即时生效。

绘制路径

图形的基本元素是路径。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

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

2. 然后使用画图命令去画出路径；

3. 之后把路径封闭；

4. 一旦路径生成，你就可以通过描边或填充路径区域来渲染图形。

以下是一些用到的函数：​​​​​​​

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
closePath() 闭合路径之后图形绘制命令又重新指向到上下文中
moveTo(x, y)移动笔触，将笔触移动到指定的坐标x以及y上
lineTo(x, y)绘制直线，绘制一条从当前位置到指定x以及y位置的直线
arc(x, y, radius, startAngle, endAngle, anticlockwise)绘制圆弧或者圆。画一个以(x, y)为圆心，以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
stroke()通过线条来绘制图形轮廓。
fill()通过填充路径的内容区域生成实心的图形。

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

第二步就是调用函数指定绘制路径，如moveTo()，lineTo()，arc()。

第三步，就是闭合路径closePath()，但并不是必须的。

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

下面我们来绘制两个三角形

function draw(){  let canvas = docment.getElementById('myCanvas');  if(canvas.getContext){    let ctx = canvas.getContext('2d');        //填充三角形    ctx.beginPath();    ctx.moveTo(75, 50);    ctx.lineTo(100, 75);    ctx.lineTo(100, 25)    ctx.fill()        //描边三角形    ctx.beginPath();    ctx.moveTo(175, 50);    ctx.lineTo(200,75);    ctx.lineTo(200,25);    ctx.closePath()    ctx.stroke()  }}

函数运行以后，得到下面的图形：

好了，今天就先到这里~~