画布（canvas）

Posted 2020-10-08 YUHONGCUISummer

1、canvas 画布 - 基础

<canvas> 画布是 html5 新增的元素，用于图形的绘制，通过 <canvas> 标签来创建。

2、画布添加好了之后，因为它没有颜色，所以我们还可以通过CSS 样式设置画布的背景颜?。

　　#myCanvas {
　　background-color: #eee;
　　 }

3、在 <canvas> 中绘制图形，必须先要拿到<canvas> 的上下文。就是在画图前要先拿到画

笔。这个上下文，就相当于是一个画笔。

画布元素.getContext("2d")

4、绘制矩形的方法

<canvas> 的上下文提供了四种方法绘制矩形：

绘制一个填充的矩形（填充色默认为黑色）

　　fillRect(x, y, width, height)

绘制一个矩形的边框（边框样式默认为 1px 的黑色实线）

　　 strokeRect(x, y, width, height)

绘制一个既没填充也没边框的矩形

　　 rect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明（类似于橡皮擦功能）

　　 clearRect(x, y, width, height)

注：

x 和 y ：指定了在<canvas> 画布上所绘制矩形的起点（左上?）坐标。

width 和 height ：设置矩形的宽高尺寸（存在边框的话）

5、清空画布

　　ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

说明：起始位置为画布的 (0, 0) 点，清除范围的尺寸为画布效果。

6、添加样式

　　fillStyle ：设置图形的填充颜色。 

　　strokeStyle ：设置图形的轮廓颜色。 

　　ineWidth ：设置当前绘制线的粗细（属性值必须是正数）。

　　lineJoin ：设置线条与线条间交接处的样式（默认值为miter ）。

　　round ：圆?

　　bevel ：斜?

　　miter ：直?

7、绘制路径 

　　绘制路径起点。

　　 绘制路径终点。

　　连接两点绘制出线段。

　　绘制路径的方法

　　moveTo(x, y) ：设置路径的起点坐标 (x, y) 。

　　lineTo(x, y) ：设置路径的终点坐标 (x, y) 。

　　stroke() ：连接两个点，绘制路径。

8、添加样式

　　lineCap ：设置每一条线段两端的样式。

　　butt ：线段两端以方形结束。

　　round ：线段两端以圆形结束。

　　square ：线段两端以方形结束。但是增加了一个宽度与线段相同，高度是线段宽度一半的矩形。

9、路径来绘制。

　　创建图形的起始点。

　　绘制路径的其他点。

　　将路径闭合。

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

　　closePath() ：<canvas> 的上下文提供了一个方法来达到闭合路径的效果。

10、填充图形 

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

　　 closePath() ：<canvas> 提供了一个方法来达到闭合路径的效果。