当前位置：首页 > news >正文

canvas 学习指南

news 2026/2/8 14:36:57

canvas 学习指南

创建一个 canvas

<! DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="utf-8" /><script type="text/javascript">window.onload = function() {//1、获取canvas对象var cnv = document.getElementById("canvas");//2、获取上下文环境对象contextvar cxt = cnv.getContext("2d");//3、开始绘制图形cxt.moveTo(50, 100);cxt.lineTo(150, 50);cxt.stroke();              }</script></head><body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray; "></canvas> </body></html>

定义宽高

如果在 CSS 样式中定义，我们使用 canvas 对象获取的宽度和高度是默认值，而不是实际的宽度和高度。这样就无法获取 canvas 对象正确的宽度和高度。获取 canvas 对象实际的宽度和高度是 Canvas 开发中最常用的操作，因此对于 Canvas 的宽度和高度我们就一定要在 HTML 属性中定义，而不是在 CSS 属性中定义。

我们可以使用 cnv.width 和 cnv.height 分别获取 Canvas 的宽度和高度，可以使用 cnv.getContext(“2d”)来获取 canvas 2D 上下文环境对象，也可以使用 toDataURL()来获取 canvas 对象产生的位图的字符串。在这里，cnv 是指 canvas 对象。

直线图形

多边形

可以将 moveTo()和 lineTo()配合使用来画三角形和矩形。其实在 Canvas 中，多边形也是使用 moveTo()和 lineTo()这两个方法画出来的。如果我们想要在 Canvas 中画多边形，则需要事先在草稿纸或软件中计算出多边形中各个顶点的坐标，然后再使用 moveTo()和 lineTo()在 Canvas 中画出来。跟矩形不一样，Canvas 没有专门用来绘制三角形和多边形的方法。对于三角形以及多边形，我们也是使用 moveTo()和 lineTo()这两个方法来实现。
一条直线
cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.stroke();
(x1, y1)表示直线“起点”的坐标。moveTo 的含义是“将画笔移到该点(x1, y1)位置上，然后开始绘图”。(x2, y2)表示直线“终点”的坐标。lineTo 的含义是“将画笔从起点(x1, y1)开始画直线，一直画到终点坐标(x2, y2)”。
上面两句代码仅仅是确定直线的“起点坐标”和“终点坐标”这两个状态，但是实际上画笔还没开始“动”。因此我们还需要调用上下文对象的 stroke()方法才有效。使用 Canvas 画直线，与我们平常用笔在纸张上画直线是一样的道理，都是先确定直线起点(x1, y1)与终点(x2, y2)，然后再用笔连线（stroke()）。
矩形
对于绘制矩形，Canvas 还为我们提供了独立的方法来实现。在 Canvas 中，矩形分为两种，即“描边”矩形和“填充”矩形。

在 Canvas 中，我们可以将 strokeStyle 属性和 strokeRect()方法配合使用来画一个“描边矩形”。 cxt.strokeStyle = 属性值； cxt.strokeRect(x, y, width, height);
（1）strokeStyle 属性 strokeStyle 属性取值有三种，即颜色值、渐变色、图案。对于 strokeStyle 取值为渐变色和图案的情况
2）strokeRect()方法 strokeRect()方法用于确定矩形的坐标，其中 x 和 y 为矩形最左上角的坐标。注意，凡是对于 Canvas 中的坐标，大家一定要根据 W3C 坐标系来理解。此外 width 表示矩形的宽度，height 表示矩形的高度，默认情况下 width 和 height 都是以 px 为单位的。

在 Canvas 中，我们可以将 fillStyle 属性和 fillRect()方法配合使用来画一个“填充矩形”。
cxt.fillStyle=属性值； cxt.fillRect(x, y, width, height);
x 和 y 为矩形最左上角的坐标，width 表示矩形的宽度，height 表示矩形的高度。strokeRect()、fillRect()和 rect()都可以画矩形。这三种方法参数是相同的，不同在于实现效果方面。其中 strokeRect()和 fillRect()这两个方法在调用之后，会立即把矩形绘制出来。而 rect()方法在调用之后，并不会把矩形绘制出来。只有在使用 rect()方法之后再调用 stroke()或者 fill()方法，才会把矩形绘制出来。
x 和 y 为矩形最左上角的坐标，width 表示矩形的宽度，height 表示矩形的高度。strokeRect()、fillRect()和 rect()都可以画矩形。这三种方法参数是相同的，不同在于实现效果方面。其中 strokeRect()和 fillRect()这两个方法在调用之后，会立即把矩形绘制出来。而 rect()方法在调用之后，并不会把矩形绘制出来。只有在使用 rect()方法之后再调用 stroke()或者 fill()方法，才会把矩形绘制出来。

清空矩形

我们可以使用 clearRect()方法来清空“指定矩形区域”

曲线图形

圆形

我们可以使用 arc()方法来画一个圆
cxt.beginPath(); cxt.arc(x, y，半径，开始角度，结束角度，anticlockwise); cxt.closePath();

首先必须调用 beginPath()方法来声明“开始一个新路径”，然后才可以开始画圆。在使用 arc()方法画圆完成之后，我们还需要调用 closePath()方法来关闭当前路径。beginPath()和 closePath()一般都是配合使用的。其中，beginPath()表示“开始路径”，closePath()表示“关闭路径”
anticlockwise 是一个布尔值，当为 true 时，表示按逆时针方向绘制；当为 false 时，表示按顺时针方向绘制。anticlockwise 默认值为 false，也就是说默认情况下按顺时针方向绘制。

弧形

如果想要画弧线，常见的有两种方法：arc()、arcTo()。
//状态描述 cxt.beginPath(); cxt.arc(x, y，半径，开始角度，结束角度，anticlockwise); //描边 cxt.strokeStyle = “颜色值”; cxt.stroke();

“arc()画弧线”与“arc()画描边圆”最大的不同在于：arc()画弧线不使用 closePath()来关闭路径。这一点大家一定要区分开，因为弧线不是一个闭合图形。而 closePath()是用来绘制“封闭图形”的

可以使用 arcTo()方法来画一条弧线
cxt.arcTo(cx, cy, x2, y2, radius);
(cx , cy)表示控制点的坐标，(x2 , y2)表示结束点的坐标，radius 表示圆弧的半径。

如果我们想要画一条弧线，需要提供三个点的坐标：开始点、控制点和结束点。其中一般由 moveTo()或 lineTo()提供开始点，arcTo()提供控制点和结束点。arcTo()方法就是利用“开始点”“控制点”和“结束点”这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为 radius 的圆弧。其中，弧线的起点是“开始点所在边与圆的切点”，而弧线的终点是“结束点所在边与圆的切点”。

canvas 学习指南