HTML的Canvas画布的使用

积点德

2024-04-23 帮助1人

1.Canvas 简介

Canvas 表示画布，现实生活中的画布是用来作画的。

HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。

利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。

2，使用 Canvas 绘制图形

2.1 <canvas> 标签

使用 HTML5 中的 <canvas> 标签在网页中创建一个画布，语法格式如下：

<canvas id="canvas" width="400" height="300">
    您的浏览器不支持canvas标签，请更新浏览器
</canvas>

上述代码定义了一个 id 为 canvas 的画布，并设置了画布的宽度为 400px，高度为 300px。

通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象，代码如下所示：

var canvas = document.getElementById("canvas");

上述代码获取了 id 为 canvas 的画布，同时将获取的画布对象保存在变量 canvas 中。

context 对象：是画布的上下文，也叫做绘制环境，是所有的绘制操作 API 的入口。 context 对象可以使用 getContext() 方法获得，代码如下所示：

var context = canvas.getContext('2d');

上述代码中的参数 2d 代表画笔的种类，表示二维绘图的画笔。如果想要绘制三维图，可以把参数替换为 webgl。

2d：代表一个平面，绘制图形时需要在平面上确定起始点，也就是“从哪里开始画”，这个点需要通过坐标来控制。

Canvas 的坐标系：从最左上角 0,0 开始。x 轴向右逐渐增加，y 轴向下逐渐增加。

3.2 绘制线条

线的定义：线是所有复杂图形的组成基础，想要绘制复杂的图形，首先要从绘制线开始。

线的组成：在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。

初始位置：在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。

在画布中使用 moveTo(x, y) 方法来定义初始位置，其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置，中间用 , 隔开。x 和 y 的取值为数字，表示像素值（单位省略）。

设置初始位置的示例代码如下所示：

context.moveTo(x, y);

连线端点：在画布中使用 lineTo(x, y) 方法来定义连线端点。和初始位置类似，连线端点也需要定义 x 和 y 的坐标位置。

定义连线端点的代码如下所示：

context.lineTo(x, y);

描边：通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。

使用画布中的 stroke() 方法，可以实现线的可视效果。

设置描边的代码如下所示：

context.stroke();

绘制字母 M，效果如图：

步骤一：创建画布：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绘制字母M</title>
    </head>
    <body>
        <canvas id="canvas" width="400" height="300">
            您的浏览器不支持canvas标签，请更新浏览器
        </canvas>
    </body>
</html>

步骤二：绘制字母 M：

<script>
    var canvas = document.getElementById('canvas'); // 获取canvas标签
    var context = canvas.getContext('2d');          // 获得context对象
    
    context.moveTo(10,100);     // 定义初始位置
    context.lineTo(30,10);      // 定义连接线端点
    context.lineTo(50,100);     // 定义连接线端点
    context.lineTo(70,10);      // 定义连接线端点
    context.lineTo(90,100);     // 定义连接线端点
    context.stroke();           // 描边
</script>

3.3 设置线条的样式

掌握设置线条的样式的方法，能够实现设置不同样式的线条。

设置线条宽度：使用 lineWidth 属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。

设置线的宽度的示例代码如下所示：

context.lineWidth = 10;

以上代码设置了线的宽度为 10px。

设置描边颜色：使用 strokeStyle 属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。

设置描边颜色的示例代码如下所示：

context.strokeStyle = '#f00';
context.strokeStyle = 'red';

以上两种方式都可以用于设置线的描边颜色为红色。

设置端点形状：默认情况下，线的端点是方形的，通过 lineCap 属性可以改变端点的形状。

lineCap 属性的取值有3个：

butt（默认值）：默认效果，无端点，显示直线方形边缘
round：显示圆形端点
square：显示方形端点

设置端点形状的示例代码如下所示：

context.lineCap = 'round';  // 设置圆形端点

除了执行 stroke() 方法根据路径进行描边，还可以使用 fill() 方法进行图形的填充，示例代码如下：

context.fill();

同理也可以使用 fillStyle 属性可以定义路径的填充颜色，该属性的取值为十六进制颜色值或颜色的英文名，示例代码如下：

context.fillStyle = 'green';

以上代码将会给路径填充绿色。

注意：无论是描边还是填充，设置的样式都需要写在描边或填充方法之前才起作用。

3.3 设置线条的路径

掌握设置线条的路径的方法，能够在网页中绘制多种图形。

路径的定义：路径是所有图形绘制的基础，通过初始位置和连线端点即可创建一条路径。

路径需要通过路径状态进行重置或闭合，来产生不同的路径样式。

路径的状态：

重置路径
闭合路径

重置路径的概念：

在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。

绘制两条不同样式的线条，效果如图：

步骤一：创建画布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="400" height="3000">
            您的浏览器不支持canvas标签，请更新浏览器
        </canvas>
    </body>
</html>

步骤二：重置路径

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    context.moveTo(10,10);          // 定义初始位置
    context.lineTo(300,10);         // 定义链接端点
    context.lineWidth=5;            // 设置线的宽度
    context.strokeStyle='red';      // 设置线的颜色
    context.stroke();               // 描边
    context.beginPath();            // 重置路径
    context.moveTo(10,60);          // 定义初始位置
    context.lineTo(300,60);         // 定义链接端点
    context.lineWidth=10;           // 设置线的宽度
    context.strokeStyle='green';    // 设置线的颜色
    context.stroke();               // 描边
</script>

闭合路径的概念：

闭合路径就是将我们绘制的开放路径进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。

示例代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="400" height="300">
            您的浏览器不支持canvas标签，请更新浏览器
        </canvas>
        <script>
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            
            context.moveTo(10,10);
            context.lineTo(10,100);
            context.lineTo(100,100);
            context.closePath();    // 闭合路径
            context.stroke();
        </script>
    </body>
</html>

canvas 绘制图形的基本步骤：

① 创建画布：<canvas></canvas>

② 准备画笔（获取上下文对象）：canvas.getContext('2d');

③ 开始路径规划：context.beginPath();

④ 移动起始点：context.moveTo(x, y);

⑤ 绘制线（矩形、圆形、图片...）：context.lineTo(x, y);

⑥ 闭合路径：context.closePath();

⑦ 绘制描边：context.stroke();

这篇好文章是转载于：学新通技术网

HTML的Canvas画布的使用

1.Canvas 简介

2，使用 Canvas 绘制图形

2.1 <canvas> 标签

3.2 绘制线条

3.3 设置线条的样式

3.3 设置线条的路径

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

HTML的Canvas画布的使用

1.Canvas 简介

2， 使用 Canvas 绘制图形

2.1 <canvas> 标签

3.2 绘制线条

3.3 设置线条的样式

3.3 设置线条的路径

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

2，使用 Canvas 绘制图形