本文介绍: Canvas 表示画布,现实生活中的画布用来作画的。HTML5 中的 Canvas我们可以称它为“网页中的画布”。默认情况下,Canvas 是一块 300px*150px矩形画布用户可以自定义画布大小或为画布添加其他属性利用 Canvas 实现绘画:Canvas 并不是通过鼠标绘画的,而是用户需要通过 JavaScript控制画布中的内容例如添加图片线条文字等。

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>

上述代码定义一个 idcanvas 的画布,并设置了画布的宽度为 400px高度为 300px

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

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

上述代码获取idcanvas 的画布,同时将获取的画布对象保存变量 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&gt;
<html&gt;
    <head&gt;
        <meta charset="UTF-8"&gt;
        <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个:

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

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();

原文地址:https://blog.csdn.net/m0_67883007/article/details/128377360

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_41412.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注