上一节我们已经学会了如何创建 Canvas 画布，本节我们来学习有关于 Canvas 中的属性和方法的使用，通过这些属性和方法，我们可以绘制各种图形，例如线条、矩形、圆形、多边形等等。
Canvas坐标
上一节我们已经学习了如何创建画布，而要在画布上绘制图形首先我们得弄清楚画布中的坐标关系。
Canvas画布中的左上角坐标为 (0,0) ，画布的 x 和 y 轴用于在画布上对绘画进行定位。
如下图所示：
绘制线条
我们可以通过下面属性和方法来在 Canvas 画布中绘制线条：
-
beginPath()：用于起始一条路径，或重置当前路径。 -
closePath()：创建从当前点到开始点的路径。 -
moveTo()：把路径移动到画布中的指定点，不创建线条。此方法有两个参数，第一个参数为路径在x轴的坐标，第二个参数为路径在y轴的坐标。 -
lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。 -
stroke()：会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色为黑色。 -
lineWidth：设置或返回当前的线条宽度，单位为像素。 -
strokeStyle：设置或返回用于笔触的颜色、渐变或模式。
示例：
在画布中绘制一条蓝色的线条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<canvas id="mycanvas" width="200px" height="200px" style="border: 1px solid #000;"></canvas>
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.beginPath(); // 开始绘制
ctx.lineWidth="3"; // 指定线条宽度
ctx.strokeStyle="#6699CC"; // 指定线条颜色
ctx.moveTo(0,0); // 指定线条的起始点
ctx.lineTo(200,200);// 指定线条的结束点
ctx.stroke(); // 进行绘制
</script>
</body>
</html>
在浏览器中的演示效果：
从上图可以看出，我们在画布中绘制了一根蓝色的线条，线条的起始位置为
(0, 0)，结束位置为(200,200)，线条宽度为 3px，线条颜色为蓝色。
绘制矩形
Canvas 中绘制矩形的方法和属性如下所示：
-
fillStyle：属性用于设置或返回用于填充绘画的颜色、渐变或模式。 -
rect()：创建矩形。第一个参数为x坐标，第二个参数为y坐标，第三个参数为矩形的宽度，第四个参数为矩形的高度。 -
fillRect()：绘制已经填色的矩形。第一个参数为x坐标，第二个参数为y坐标，第三个参数为矩形的宽度，第四个参数为矩形的高度。 -
strokeRect()：绘制矩形，默认颜色是黑色。第一个参数为x坐标，第二个参数为y坐标，第三个参数为矩形的宽度，第四个参数为矩形的高度。 -
clearRect()：清空给定矩形内的指定像素。第一个参数为要清除矩形左上角的x坐标，第二个参数为要清除矩形左上角的y坐标，第三个参数为要清除矩形的宽度，第四个参数为要清除矩形的高度。
示例：
在画布x坐标50，y坐标50的位置，绘制一个宽为 50px，高为 100px的空白矩形：
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.rect(50, 50, 50, 100);
ctx.stroke();
</script>
在浏览器中的演示效果：
在画布x坐标70，y坐标40的位置，绘制一个宽为 70px，高为 40px 的粉色矩形：
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.fillStyle = "pink"; // 填充颜色
ctx.fillRect(70, 40, 70, 40);
</script>
在浏览器中的演示效果：
在给定矩形内清空一个矩形：
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.fillStyle = "#9999FF";
ctx.fillRect(25, 25, 150, 150); // 绘制矩形
ctx.clearRect(50,50,50,50); // 要清除矩形的大小
</script>
在浏览器中的演示效果：
上图中的紫色矩形是我们绘制的矩形，而里面的白色矩形就是我们清空的矩形区域。clearRect() 方法的坐标也是从(0, 0)。
绘制圆形
在 Canvas 中可以使用 arc() 方法来创建曲线或者圆。
arc() 方法的语法如下所示：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
其中 x 为圆的中心的 x 坐标，y 为圆的中心的 y 坐标，r 为圆的半径，sAngle 为起始角，eAngle 为结束角。counterclockwise 是可选参数，规定应该逆时针还是顺时针绘图，false为顺时针，true 为逆时针。
示例：
例如在画布中绘制一个半径为50的圆形：
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2*Math.PI);
ctx.stroke();
</script>
在浏览器中的演示效果：
Canvas 文本
使用 Canvas 绘制文本，需要使用到的属性和方法：
-
font：设置或返回画布上文本内容的当前字体属性。可以设置的属性值有font-style、font-variant、font-weight、font-size、font-family等。 -
textAlign：设置或返回文本内容的当前对齐方式。 -
fillText()：在画布上绘制填色的文本。默认颜色是黑色。 -
strokeText()：在画布上绘制文本，没有填色。第一个参数为画布上输出的文本，第二个参数为绘制文本的 x 坐标位置，第三个参数为绘制文本的 y 坐标位置。
示例：
在画布上绘制文本：
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.font = "28px Georgia";
ctx.strokeText("侠课岛", 50, 50);
</script>
在浏览器中的演示效果：
Canvas 渐变
我们可以在 Canvas 中给矩形、圆形、文本、线条填充渐变，各种形状可以自己定义不同的颜色。
设置渐变的方式有下面两种：
-
createLinearGradient()方法，可以用于创建线性的渐变对象，语法如下所示：
context.createLinearGradient(x0,y0,x1,y1);
| 参数 | 描述 |
|---|---|
| x0 | 第一个参数为渐变开始点的 x 坐标 |
| y0 | 第二个参数为渐变开始点的 y 坐标 |
| x1 | 第三个参数为渐变结束点的 x 坐标 |
| y1 | 第四个参数为渐变结束点的 y 坐标 |
-
createLinearGradient()方法，用于创建放射状/圆形渐变对象，语法如下所示：
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |
示例：
定义一个从粉色到蓝色的渐变的矩形：
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 150, 0);
grd.addColorStop(0, "#FFC0CB"); // 粉色
grd.addColorStop(1, "#87CEEB"); // 蓝色
tx.fillStyle = grd;
ctx.fillRect(10,50,180,100); // 绘制矩形
</script>
在浏览器中的演示效果：
总结
Canvas 中的属性和方法有很多，通过这些属性和方法，我们就能成功在 Canvas 画布中绘制各种图形了。要记住 <canvas> 元素本身并没有绘制能力，它仅是一个图形容器，我们是通过 JavaScript 脚本来完成实际绘制的。
想查看更多可以点击链接：https://www.9xkd.com/
网友评论