canvas路径剪裁clip(图文示例)

在这里插入图片描述

查看专栏目录

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

文章目录

    • 示例效果图
    • 示例源代码(共94行)
    • 相关API
    • canvas基本属性
    • canvas基础方法

canvas如何路径剪裁呢?clip()表示路径剪裁。使用时候,先绘制剪裁路径,执行clip()方法,再绘制的内容就在这个剪裁路径中呈现。

语法:

context.clip();
context.clip(fillRule);
context.clip(path, fillRule);

fillRuleString
填充规则。用来确定一个点实在路径内还是路径外。可选值包括:

  1. nonzero:非零规则。此乃默认规则。
  2. evenodd:奇偶规则。

关于’nonzero’和’evenodd’规则可参见这篇文章。

pathObject
指Path2D对象。

示例效果图

在这里插入图片描述

示例源代码(共94行)


/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-02
*/
<template><div class="djs_container"><div class="top"><h3>canvas路径剪裁clip</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="success" size="mini" @click="draw1()">未剪裁状态</el-button><el-button type="primary" size="mini" @click="draw2()">剪裁后状态</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="480"></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.fillStyle='orange';this.ctx.save();},draw1() {this.clearCanvas(); this.ctx.beginPath();this.ctx.fillRect(100,100,400,300);	},draw2() {this.ctx.save();this.clearCanvas(); this.ctx.beginPath();this.ctx.moveTo(20, 20);this.ctx.lineTo(500, 480);this.ctx.lineTo(410, 350);this.ctx.clip();// 填充图片this.ctx.fillRect(100,100,400,300)	this.ctx.restore();},}}
</script>
<style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #222;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #222;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #cde;width: 980px;height: 480px;background-color: #eee;}.top>>>.el-button{ margin-bottom: 8px;}
</style>

相关API

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip

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/661871.shtml

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

相关文章

(软件分享)Fotor - AI照片编辑器

【应用名称】&#xff1a;Fotor - AI照片编辑器 【适用平台】&#xff1a;#Android 【软件标签】&#xff1a;#Fotor 【应用版本】&#xff1a;7.5.0.2➡7.5.1.5 【应用大小】&#xff1a;225MB 【软件说明】&#xff1a;软件升级更新。Fotor 包含编辑照片所需的所有工具。用户…

踩坑系列——mysql数据库字段类型为tinyint输入字符串条件查询无效

背景 排查问题发现有个查询sql的条件传的字符串‘ENABLE’&#xff0c;而数据库这个字段类型是tinyint&#xff0c;值只有0和1&#xff0c;看查询结果过滤出的都是值为0的数据。按自己理解这个语句应该查不出数据&#xff0c;但是结果非预期 排查 问了下ChatGpt给的回答是这…

@ 代码随想录算法训练营第6周(C语言)|Day37(贪心)

代码随想录算法训练营第6周&#xff08;C语言&#xff09;|Day37&#xff08;贪心&#xff09; Day37、贪心&#xff08;包含题目 738.单调递增的数字 968.监控二叉树 &#xff09; 738.单调递增的数字 题目描述 给定一个非负整数 N&#xff0c;找出小于或等于 N 的最大的整…

CH395Q之CH395Q驱动库移植与驱动库分析(二)

本节主要介绍以下内容&#xff1a; 一、CH395Q驱动库移植 二、源码分析 一、CH395Q驱动库移植 驱动库移植主要有两个途径&#xff0c;一个是南京沁恒官方网址&#xff0c;一个是通过正点原子官方&#xff0c;原子官方对沁横官方提供的驱动库进行了完善与修改。自用的话推荐…

1个 THM 和多台 BSP 的通讯(以邦纳 BSP 系列 PLC 为例)

一&#xff0e;架构和接线如下图所示 二、建立连接 选择 PLC 的驱动&#xff0c;多台连接请勾选“次连接” “次连接总数”就是要连接的 PLC 台数。 设置触摸屏通讯参数&#xff1b;同时确保每台 PLC 的通讯参数与该设定相同&#xff08;但站号不能相同&#xff09;。 三、…

深度探讨ThreadLocal是否真的可能引发内存泄漏

目录 引言 1. ThreadLocal的基本原理 2. 潜在的内存泄漏原因 2.1 不正确的清理 2.2 长生命周期的ThreadLocal实例 3. 示例和解决方案 示例代码&#xff1a; 解决方案&#xff1a; 4. 结论 引言 在Java多线程编程中&#xff0c;ThreadLocal是一个强大的工具&#xff0…

LVS负载均衡对udp流量进行参数调整一例

本文记录一套百万会话级的LVS软负载均衡系统,从加权最少链接均衡算法调整为源主机散列算法并增加会话保持时间的配置过程。 一、调整原由 业务侧为了提升平台的设备连接会话保持能力,希望将LVS软负载均衡系统的均衡算法从加权最少链接均衡算法wlc调整为源主机散列算法sh,并…

HTML -- 常用标签

标签 表示HTML网页内容的一个最基本的组织单元&#xff0c;类似于语文中的标点符号&#xff0c; 标签的作用&#xff1a;告诉浏览器当前标签中的内容是什么&#xff0c;以什么格式在页面中进行呈现 单标签 单标签&#xff08;只有一个标签名的标签&#xff09;的标签格式&…

深入解剖指针篇(2)

目录 指针的使用 strlen的模拟实现 传值调用和传址调用 数组名的理解 使用指针访问数组 一维数组传参的本质 冒泡排序 个人主页&#xff08;找往期文章&#xff09;&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 指针的使用 strlen的模拟实现 库函数strlen的功能是求字符串…

1683. 无效的推文

说在前面 &#x1f388;不知道大家对于算法的学习是一个怎样的心态呢&#xff1f;为了面试还是因为兴趣&#xff1f;不管是出于什么原因&#xff0c;算法学习需要持续保持。 题目描述 表&#xff1a;Tweets ------------------------- | Column Name | Type | --------…

PySpark(二)RDD基础、RDD常见算子

目录 RDD RDD五大特性 RDD创建 RDD算子 常见的Transformation算子 map flatMap mapValues reduceByKey groupBy filter distinct union join intersection glom groupByKey groupByKey和reduceByKey的区别 ? sortBy sortByKey 常见的action算子 countByKey…

MySQL入门篇(10)-聚合函数的应用

MySQL数据库聚合函数的应用 在MySQL数据库中&#xff0c;聚合函数用于计算一组数据的统计值并返回结果。这些函数可以应用于查询语句中&#xff0c;对数据进行汇总、计数、平均值计算等操作。本文将介绍一些常用的MySQL聚合函数及其应用。 1. COUNT函数 COUNT函数用于计算指…

软考 系统分析师系列知识点之需求管理(2)

接前一篇文章&#xff1a;软考 系统分析师系列知识点之需求管理&#xff08;1&#xff09; 所属章节&#xff1a; 第11章. 软件需求工程 第8节. 需求管理 11.8.2 需求风险管理 人们做事情总希望一帆风顺&#xff0c;做项目也是如此&#xff0c;总是希望项目进展顺利&#xff…

Ubuntu18配置Docker

1.基本过程 1.更新软件源列表 sudo apt update2.安装软件包依赖 sudo apt install apt-transport-https ca-certificates curl software-properties-common3.在系统中添加Docker的官方密钥 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - …

新概念英语第二册(49)上

【New words and expressions】生词和短语&#xff08;13&#xff09; tired adj. 厌烦的 real adj. 真正的 owner n. 主人 spring n. 弹簧 mattress …

erlang (erlang 操作模块)学习笔记(四)

map_size 1> map_size(#{a>1, b>2, c>3}). 3返回一个整数&#xff0c;即键值对的数量 max 2> max(1, 2). 2 3> max(1.0, 1). 1.0 4> max(1, 1.0). 1 5> max("abc", "b"). "b"返回 Term1 和 Term2 中最大的值。如果这…

前端JavaScript篇之ES6中数组新增了哪些扩展?

目录 ES6中数组新增了哪些扩展?1. **箭头函数&#xff1a;**2. **扩展运算符&#xff08;Spread Operator&#xff09;&#xff1a;**3. **解构赋值&#xff1a;**4. **Array.from()方法&#xff1a;**5. **Array.of()方法&#xff1a;**6. **find()和findIndex()方法&#xf…

Python入门到精通(七)——Python文件操作

Python文件操作 一、文件的编码 二、文件的读取 1、操作汇总 2、model 常用的三种基础访问模式 三、文件的写入 四、文件的追加 五、综合案例 一、文件的编码 1、什么是编码&#xff1f; 编码就是一种规则集合&#xff0c;记录了内容和二进制间进行相互转换的逻辑。编…

Flink1.14新版KafkaSource和KafkaSink实践使用(自定义反序列化器、Topic选择器、序列化器、分区器)

前言 在官方文档的描述中&#xff0c;API FlinkKafkaConsumer和FlinkKafkaProducer将在后续版本陆续弃用、移除&#xff0c;所以在未来生产中有版本升级的情况下&#xff0c;新API KafkaSource和KafkaSink还是有必要学会使用的。下面介绍下基于新API的一些自定义类以及主程序的…

解析Excel文件内容,按每列首行元素名打印出某个字符串的统计占比(超详细)

1.示例&#xff1a; 开发需求&#xff1a;读取Excel文件&#xff0c;统计第3列到第5列中每列的"False"字段占比&#xff0c;统计第6列中的"Pass"字段占比&#xff0c;并按每列首行元素名打印出统计占比 1.1 实现代码1&#xff1a;列数为常量 请确保替换y…