【Web前端】5分钟掌握画布元素的使用

今天药忘吃喽~ 2023-09-30 18:36 6阅读 0赞

画布（canvas）是HTML5中新增加的一个非常重要的元素，在页面上放置一个canvas元素，就相当于在页面上放置了一块画布,使用它的API，我们可以通过绘制的方式实现图形、线条和文字的显示。

--------------------

**1. 目标:绘制中小学教学使用的工具**

使用画布元素，快速绘制一个中小学教学使用的工具，效果如下：

![7babbd9e31b3bb948c1909dba15db75c.png][]

**2.****步骤**

任何事物都是从最简单最基础的部分开始，最终形成复杂的庞大的结构。这里介绍如何实现最简单的图形绘制，包括直线、矩形、园等。

实现上述的图形效果，需要掌握画布的下列API的使用方法：

*  直接绘制方法

*  圆形绘制方法

*  文字绘制方法

同时，还要掌握在图形绘制时图形和文字的颜色配制、线条闭合路径设置和图形的填充及描绘的过程。

**3.****过程**

3.1 在页面中添加画布元素，代码如下：

<div>
        
        <canvas id="cvs" name="cvs"width="320" height="480" >
            你的浏览器不支持画布元素
        </canvas>
    </div>

由于canvas是HTML5中新增元素，因此，需要考虑到它对浏览器的兼容性，如果不兼容该元素时，元素中的文字将显示在页面中。

下列代码用于获取元素的上下文环境对象：

var c=document.getElementById("cvs");
    var cxt=c.getContext("2d");

在上述代码中，先通过id的方式获取到元素对象，并调用它的getContext方法，然后以2d的形式来绘制画布中的图形效果。

3.2 线条的绘制

*  使用上下文环境对象中的moveTo(x,y)方法，设置起始点的定位。

*  定好起始点后，再使用lineTo(x,y)方法绘制到达的终站位置。

*  lineTo(x,y)方法可以使用多次，用于绘制多条线条的图形。

cxt.beginPath();
    cxt.lineWidth = 2;
    cxt.strokeStyle="blue";
    cxt.moveTo(70,120);
    cxt.lineTo(70,320);
    cxt.lineTo(260,320);
    cxt.lineTo(70,121);
    cxt.stroke();
    cxt.closePath();

3.3 圆形的绘制

*  与线条绘制不同，圆形的绘制更加简单，它的API方法代码如下：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

*  各参数的功能如下表所示：

![7fdfe00621e4e4d71f4b23dd912d2aaf.png][]

cxt.beginPath();
        cxt,lineWidth = 5;
        cxt.strokeStyle="green";
        cxt.arc(130,260,25,0,Math.PI*2,true);
        cxt.stroke();
        cxt.closePath();

在上述代码中，以闭合的路径方式，先配置圆线条的宽度和颜色，再调用arc方法绘制一个指定圆点和半径的图形，最后调用stroke()，按设定的路径进行绘制。

3.4 文字的绘制

画布中，文字的绘制更加简单，只要确定文字内容、坐标值就可以绘制了。

context.fillText(text,x,y,maxWidth);

**各参数的功能如下表所示：**

![547239ec067b9d434679f5f072dd1e9e.png][]

cxt.beginPath();
    cxt.font ="25px 黑体";
    cxt.fillStyle = "red";
    cxt.fillText("绘制教学工具",70,380,200);
    cxt.closePath();

在上述代码中，以闭合路径的方式绘制文字，先设定文字的大小与字体，再配置字体的颜色值，完成配置后，最后调用fillText()方法实现文字在指定坐标的绘制。

**4.****总结**

通过本示例的介绍，初步掌握画布元素的基础使用和以下画布API的调用：

*  如何绘制一条独立或闭合的线条。

*  绘制一个指定圆点和半径的圆形。

*  在画布中以绘制的方式添加文字。

--------------------

画布元素的基础功能相对简单，但在使用画布元素开发大型项目时，这些基础的知识点则是开发过程中的核心内容，反复练习画布元素的基础API是熟练掌握它使用的有效方法。

完整代码：

<!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>画布DEMO</title>
      <style>
        div{
            margin:0 auto;
            width:600px;
        }
      </style>
     </head>
     <body>
      <div>
        
        <canvas id="cvs" name="cvs"width="320" height="480" >
            你的浏览器不支持画布元素
        </canvas>
      </div>
      <script>
        var c=document.getElementById("cvs");
        var cxt=c.getContext("2d");
        // 线条的绘制
        cxt.beginPath();
        cxt.lineWidth = 2;
        cxt.strokeStyle="blue";
        cxt.moveTo(70,120);
        cxt.lineTo(70,320);
        cxt.lineTo(260,320);
        cxt.lineTo(70,121);
        cxt.stroke();
        cxt.closePath();
        // 圆形的绘制
        cxt.beginPath();
        cxt,lineWidth = 5;
        cxt.strokeStyle="green";
        cxt.arc(130,260,25,0,Math.PI*2,true);
        cxt.stroke();
        cxt.closePath();
        // 文字的绘制
        cxt.beginPath();
        cxt.font ="25px 黑体";
        cxt.fillStyle = "red";
        cxt.fillText("绘制教学工具",70,380,200);
        cxt.closePath();
      </script>
     </body>
    </html>

[7babbd9e31b3bb948c1909dba15db75c.png]: https://img-blog.csdnimg.cn/img_convert/7babbd9e31b3bb948c1909dba15db75c.png
[7fdfe00621e4e4d71f4b23dd912d2aaf.png]: https://img-blog.csdnimg.cn/img_convert/7fdfe00621e4e4d71f4b23dd912d2aaf.png
[547239ec067b9d434679f5f072dd1e9e.png]: https://img-blog.csdnimg.cn/img_convert/547239ec067b9d434679f5f072dd1e9e.png