canvas绘制路径之 beginPath() 和 closePath()

在这里插入图片描述

查看专栏目录

canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

    • 常用的绘制路径方法
    • 绘制路径的步骤
    • beginPath()
    • 怪异效果图
    • 示例源代码(共103行)
    • 怪异分析
    • closePath()
      • 示例:
    • closePath()的使用场景
    • canvas基本属性
    • canvas基础方法

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。

常用的绘制路径方法

beginPath(): 新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
closePath(): 闭合路径,用于将当前路径的起点和终点连接起来,形成一个封闭的路径。
stroke(): 通过线条来绘制图形轮廓。
fill(): 通过填充路径的内容区域生成实心的图形。
moveTo(x, y): 将起点移动到指定的坐标 x 以及 y 上(默认是在(0, 0))。
lineTo(x, y): 绘制一条从当前位置到指定 x 以及 y 位置的直线(通常结合moveTo(x, y)使用,先设置起点在划线)。
arc(): 绘制圆弧或者圆.
quadraticCurveTo(): 绘制二次贝塞尔曲线
bezierCurveTo(): 绘制三次贝塞尔曲线

绘制路径的步骤

  • 首先,需要创建路径起始点。
  • 然后使用画图方法去画出路径
  • 把路径封闭。
  • 一旦路径生成,就可以通过描边或填充路径区域来渲染图形。

在这篇文章中,我们着重关注beginPath()closePath()

beginPath()

通过清空子路径列表开始一个新路径的方法。 当我们想创建一个新的路径时,调用此方法。 如果不调用beginPath, 再渲染上就会继承之前的路径,造成错误。

怪异效果图

在这里插入图片描述

示例源代码(共103行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-09
*/
<template><div class="djs_container"><div class="top"><h3>canvas不添加beginPath的怪异现象</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw1()">不调用beginPath</el-button><el-button type="primary" size="mini" @click="draw2()">调用beginPath</el-button><el-button type="danger" size="mini" @click="clearCanvas()">清理画布</el-button></h4></div><div class="dajianshi "><canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas></div></div>
</template>
<script>export default {data() {return {ctx: null,canvas: null,}},mounted() {this.setCanvas()},methods: {clearCanvas(){this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);},setCanvas() {this.canvas = document.getElementById('dajianshi');if (!this.canvas.getContext) return;this.ctx = this.canvas.getContext("2d");this.ctx.lineWidth=10;},draw1() {			this.ctx.moveTo(100,10);this.ctx.lineTo(100,400);this.ctx.strokeStyle = "black";this.ctx.stroke();this.ctx.moveTo(120,10);this.ctx.lineTo(120,400);this.ctx.strokeStyle = "red";this.ctx.stroke();},draw2() {			  					this.ctx.beginPath();			 this.ctx.moveTo(500,10);this.ctx.lineTo(500,400);this.ctx.strokeStyle = "black";this.ctx.stroke();this.ctx.beginPath();this.ctx.moveTo(520,10);this.ctx.lineTo(520,400);this.ctx.strokeStyle = "orange";this.ctx.stroke();},}}
</script><style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #994170;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #994170;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;background-color: #f9f9f9;}
</style>

怪异分析

上述示例中, draw1()中没有调用beginPath。

  1. 开始时候,点击draw1(), 出现两条红线,因为他们在一个路径中,上面的black颜色被红色所替代。
  2. 后来点击 draw2(), 因为启用了beginPath, 与之前做了切分,不在同一个路径中。分别的渲染颜色起到了效果。
  3. 最后再点击draw1(), draw2的后面一条线路径同draw1的路径是同一个,颜色就被draw1的最后的红色所替代,形成3条路径。

closePath()

在绘制路径时,通常我们会使用 moveTo() 方法将画笔移动到起始点,然后使用其他绘图方法(如 lineTo()、arcTo() 等)定义路径的形状和轮廓。当我们想要将路径闭合时,我们可以使用 closePath() 方法。

示例:

ctx.beginPath();
ctx.moveTo(20, 70);
ctx.lineTo(20, 100);
ctx.lineTo(80, 100);
ctx.closePath();
ctx.stroke();

使用了 closePath() 方法的路径是封闭的,起点和终点通过一条直线连接。我们调用了 closePath() 方法来将路径封闭,所以画笔会自动将终点与起点连接起来,形成一个封闭的路径。

closePath()的使用场景

是否需要使用 closePath() 方法取决于我们希望绘制的图形是否需要封闭。

  • 如果绘制的图形是封闭的,比如一个闭合的多边形或封闭曲线,那么使用 closePath() 方法可以确保路径的起点和终点连接起来,形成一个封闭的路径。这样,在调用 fill() 方法时,填充颜色会被应用到整个封闭区域内。
  • 如果绘制的图形已经是封闭的,或者使用的绘图方法已经自动将路径封闭(例如使用 arc() 方法绘制圆),则不必显式调用

closePath() 方法的作用仅限于路径的封闭,不会直接影响 fill() 或 stroke() 方法的结果。它只是确保路径是封闭的,从而在填充或描边时产生预期的效果。
closePath()只是闭合当前的路径,从起点到现在的这个点形成一个闭合的回路,但是,这并不意味着他之后的路径就是新路径了,不要企图通过closePath()来开始一条新的路径.

canvas基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

canvas基础方法

方法方法方法
arc()arcTo()addColorStop()
beginPath()bezierCurveTo()clearRect()
clip()close()closePath()
createImageData()createLinearGradient()createPattern()
createRadialGradient()drawFocusIfNeeded()drawImage()
ellipse()fill()fillRect()
fillText()getImageData()getLineDash()
isPointInPath()isPointInStroke()lineTo()
measureText()moveTo()putImageData()
quadraticCurveTo()rect()restore()
rotate()save()scale()
setLineDash()setTransform()stroke()
strokeRect()strokeText()transform()
translate()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/609789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Shader开发实战》-笔记

一、初识游戏图形 1、什么是渲染&#xff1f; 渲染实际上就是创建图像的过程&#xff0c;在渲染过程中创建的图像被称为渲染或者帧&#xff0c;该图像&#xff08;帧&#xff09;以每秒多次在计算机屏幕上进行呈现&#xff0c;即帧率。 负责渲染图像&#xff08;帧&#xff09…

【Redis】非关系型数据库之Redis的主从复制、哨兵和集群高可用

目录 一、主从复制、哨兵、集群的区别 二、主从复制 2.1主从复制的作用 2.2主从复制的原理 2.3主从复制的实操 步骤一&#xff1a;环境准备 步骤二&#xff1a;安装Redis以及配置文件修改 Redis的主从配置文件都一样 步骤四&#xff1a;验证主从复制 三、哨兵 3.1哨兵…

linux(ubuntu)中drontab定时器命令详解

linux&#xff08;ubuntu&#xff09;中drontab定时器命令详解 crontab 是一个用于创建、编辑和管理用户的定时任务的命令&#xff0c;它可以让用户在指定的时间自动执行指定的命令或脚本。 基本语法 -e&#xff1a;编辑用户的 crontab 文件&#xff1b;-l&#xff1a;列出用…

4.MapReduce 序列化

目录 概述序列化序列化反序例化java自带的两种Serializable非Serializable hadoop序例化实践 分片/InputFormat & InputSplit日志 结束 概述 序列化是分布式计算中很重要的一环境&#xff0c;好的序列化方式&#xff0c;可以大大减少分布式计算中&#xff0c;网络传输的数…

Redis 常用操作

一、Redis常用的5种数据类型 字符串&#xff08;String&#xff09;&#xff1a;最基本的数据类型&#xff0c;可以存储字符串、整数或浮点数。哈希&#xff08;Hash&#xff09;&#xff1a;键值对的集合&#xff0c;可以在一个哈希数据结构中存储多个字段和值。列表&#xf…

Docker实战09|使用AUFS包装busybox

前几篇文章中&#xff0c;重点讲解了如何实现构建容器&#xff0c;需要回顾的小伙伴可以看以下文章&#xff1a; 《Docker实战06&#xff5c;深入剖析Docker Run命令》《Docker实战07&#xff5c;Docker增加容器资源限制》《Docker实战08&#xff5c;Docker管道及环境变量识别…

5.3 Android BCC环境搭建(eadb版 上)

写在前面 eadb即eBPF Android Debug Bridge,它是基于adeb的重构。后者曾随aosp 10发布在platform/external目录下。 一,root权限 这里再HighLight下,当前整个专栏都是基于开发环境来展开的,也就是Android设备需要具有root权限。因此该专栏下每一篇博客都是默认了当前开发…

YOLOv8改进 | 主干篇 | 12月最新成果UniRepLknet特征提取网络(附对比试验效果图)

一、本文介绍 本文给大家带来的改进机制是特征提取网络UniRepLknet,其也是发表于今年12月份的最新特征提取网络,该网络结构的重点在于使用Dilated Reparam Block和大核心指导原则,强调了高效的结构进行通道间通讯和空间聚合,以及使用带扩张的小核心进行重新参数化,该网络…

vsode中调试CPP

如果希望在调试的时候传入参数&#xff0c;则需要再launch.json中配置&#xff0c;这个文件就是执行&#xff08;非编译&#xff09;程序时的相关配置&#xff1a; {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: …

.netcore 6 ioc注入的三种方式

1、定义接口 public interface MyInterceptorInterface 2、实现接口 public class MyInterceptorImpl : MyInterceptorInterface 在构造中增加以下代码&#xff0c;便于观察 static ConcurrentDictionary<string, string> keyValues new ConcurrentDictionary<s…

自动化生产线-采用工业机器人比人工有哪些优势?

工业机器人相对于人工具有一些显著的优势&#xff0c;这些优势使它们在制造和生产领域得到广泛应用。以下是工业机器人相对于人工的一些主要优势&#xff1a; 1、精度和一致性&#xff1a; 机器人可以执行高精度的操作&#xff0c;确保产品的质量和规格一致&#xff0c;而且不容…

CSS渐变透明

文章目录 一、前言1.1、MDN 二、实现2.1、源码2.2、线上源码 三、最后 一、前言 使用场景&#xff1a;在做两个元素的连接处的UI适配时&#xff0c;图片的颜色不能保证一定跟背景颜色或者是主色调保持一致时&#xff0c;会显得比较突兀。 1.1、MDN MDN的文档&#xff0c;点击【…

MySQL 8.0中新增的功能(八)

用户评论和用户属性 MySQL 8.0.21引入了在创建或更新用户账户时设置用户评论和用户属性的功能。用户评论由作为COMMENT子句参数传递的任意文本组成&#xff0c;通过CREATE USER或ALTER USER语句使用。用户属性由以JSON对象形式传递的数据组成&#xff0c;作为ATTRIBUTE子句参数…

​如何在iOS手机上查看应用日志

引言 在开发iOS应用过程中&#xff0c;查看应用日志是非常重要的一项工作。通过查看日志&#xff0c;我们可以了解应用程序运行时的状态和错误信息&#xff0c;帮助我们进行调试和排查问题。本文将介绍两种方法来查看iOS手机上的应用日志&#xff0c;并提供相应的操作步骤。 …

基于Github官方教程的快速入门学习

GitHub 是一个用于版本控制和协作的代码托管平台。 它允许您和其他人随时随地协同处理项目。 创建仓库 在任何页面的右上角&#xff0c;使用 下拉菜单选择“新建存储库”。 之后会进入创建仓库的界面&#xff0c;需要我们进行如下操作&#xff1a; 写仓库的名字写对于本仓库…

无失真编码之算术编码的python实现——数字图像处理

原理 无失真编码中的算术编码是一种用于将输入数据进行高效压缩的方法&#xff0c;同时保留了原始数据的完整性。 算术编码的实现过程如下&#xff1a; 数据分段&#xff1a;首先&#xff0c;将要进行编码的数据划分为一个个符号或字符。每个符号可以是文本中的一个字母、一幅…

ubuntu 20.04下 Tesla P100加速卡使用

1.系统环境&#xff1a;系统ubuntu 20.04, python 3.8 2.查看cuDNN/CUDA与tensorflow的版本关系如下&#xff1a; Build from source | TensorFlow 从上图可以看出&#xff0c;python3.8 对应的tensorflow/cuDNN/CUDA版本。 3.安装tensorflow #pip3 install tensorflow 新版…

hadoop自动获取时间

1、自动获取前15分钟 substr(from_unixtime(unix_timestamp(concat(substr(20240107100000,1,4),-,substr(20240107100000,5,2),-,substr(20240107100000,7,2), ,substr(20240107100000,9,2),:,substr(20240107100000,11,2),:,00))-15*60,yyyyMMddHHmmss),1) unix_timestam…

Ceph源码分析-s->req_id = store->svc()->zone_utils->unique_id(req->id)

s->req_id store->svc()->zone_utils->unique_id(req->id); 涉及到指针和对象方法的调用。我会逐步为你解释这行代码的含义。 s->req_id ...; s 是一个指针&#xff0c;它指向一个结构或类。req_id 是该结构或类的一个成员变量。这行代码的意思是&#xff…

《管理的实践》商业/企业的目的和功能

笔记 From《管理的实践》彼得德鲁克 企业的目的 企业的目的&#xff0c;只有一个正确而有效的定义&#xff1a;“创造顾客”。 市场不是由上帝、大自然或经济力量创造的&#xff0c;而是由企业家创造的。 企业的功能 由于企业的目的是创造顾客&#xff0c;任何企业都有两个基…