canvas实现涂鸦画板功能

查看专栏目录
canvas实例应用100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。
文章目录
- 示例效果图
- 示例源代码(共104行)
- canvas基本属性
- canvas基础方法
canvas如何实现涂鸦画板功能呢? 我们监听鼠标事件时获取到的坐标是相对于整个页面的坐标(e.clientX 和 e.clientY)。为了将这些坐标转换为相对于 元素自身的坐标,我们需要从这些值中减去 canvas.offsetLeft 和 canvas.offsetTop,确保绘制路径是在 <canvas> 元素的坐标系统内,而不是在整个页面的坐标系统中。
canvas.offsetLeft 是一个JavaScript属性,它代表了元素(在这个例子中是 <canvas> 元素)相对于其最近的定位祖先元素(offset parent)的左边距离。如果没有定位的祖先元素,那么就是相对于文档的左边距离。
这个属性通常与 canvas.offsetTop 一起使用,后者代表元素相对于其最近的定位祖先元素的顶部距离。
示例效果图

示例源代码(共104行)
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-07
*/
<template><div class="djs_container"><div class="top"><h3>canvas实现涂鸦画板功能</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="success" size="mini" @click="draw()">绘制</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> --><canvas id="dajianshi" ref="mycanvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" width="980" height="490"></canvas></div></div>
</template>
<script>export default {data() {return {canvas: null,ctx: null,drawing: false,color: 'black',lineWidth: 5,lastX: 0,lastY: 0}},mounted() {this.setCanvas()},methods: {clearCanvas() {this.drawing = false;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");},startDrawing(e) {this.drawing = true;this.lastX = e.clientX - this.canvas.offsetLeft;this.lastY = e.clientY - this.canvas.offsetTop;},draw(e) {if (!this.drawing) return;const x = e.clientX - this.canvas.offsetLeft;const y = e.clientY - this.canvas.offsetTop;this.ctx.beginPath();this.ctx.moveTo(this.lastX, this.lastY);this.ctx.lineTo(x, y);this.ctx.strokeStyle = this.color;this.ctx.lineWidth = this.lineWidth;this.ctx.stroke();this.ctx.closePath();this.lastX = x;this.lastY = y;},stopDrawing() {this.drawing = false;}}}
</script>
<style scoped>.djs_container {width: 100%;height: 680px;margin:0;padding:0;
/* 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: 490px;background-color: #eee;}
</style>
canvas基本属性
| 属性 | 属性 | 属性 |
|---|---|---|
| canvas | fillStyle | filter |
| font | globalAlpha | globalCompositeOperation |
| height | lineCap | lineDashOffset |
| lineJoin | lineWidth | miterLimit |
| shadowBlur | shadowColor | shadowOffsetX |
| shadowOffsetY | strokeStyle | textAlign |
| textBaseline | width |
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() |
相关文章:
canvas实现涂鸦画板功能
查看专栏目录 canvas实例应用100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…...
6-3、T型加减速单片机程序【51单片机+L298N步进电机系列教程】
↑↑↑点击上方【目录】,查看本系列全部文章 摘要:根据前两节内容,已完成所有计算工作,本节内容介绍具体单片机程序流程及代码 一、程序流程图 根据前两节文章内容可知,T型加减速的关键内容是运动类型的判断以及定时…...
Flutter组件 StatefulWidget、StatelessWidget 可继承写法
前言 学过Java的同学,应该都知道面向对象语言的三大特征,封装、继承、多态; Dart也是面向对象的语言,但是在Flutter中的很多组件都被下划线 _ 标记为私有,导致无法继承,本文将介绍一种非私有的创建组件写…...
skywalking链路追踪
skywalking 1.简介1.1 skywalking介绍1.2 链路追踪框架对比1.3 Skywalking架构 2 环境构建2.1 windows环境2.1.1 启动skywalking服务和UI界面2.1.2 在IDEA启动项目中使用Skywalking2.1.3 skywalking持久化 2.2 linux环境 1.简介 微服务架构已经是一个很通用的系统架构…...
如何在苹果Mac上进行分屏,多任务处理?
Apple 在 macOS Catalina 中引入了 Split View,让您可以同时查看两个应用程序。如果同时处理多个应用程序,但在它们之间切换时感到沮丧,小编教给大家在 Macbook Pro/Air 或 iMac 上使用分屏功能流畅地进行多任务处理。 注意:您可…...
【Java EE】----Spring框架创建和使用
1.Spring框架创建 创建一个maven项目 添加Spring框架支持 <dependencies> 上下文<dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.3.RELEASE</version></depende…...
UE4 C++ 静态加载类和资源
静态加载类和资源:指在编译时加载,并且只能在构造函数中编写代码 .h //增加所需组件的头文件 #include "Components/SceneComponent.h" //场景组件 #include "Components/StaticMeshComponent.h" //静态网格体组件 #include &qu…...
洛谷C++简单题小练习day9—[AHOI2017]寻找探监点
day9--[AHOI2017]寻找探监点--2.7 习题概述 题目描述 一个nn 的网格图(标号由 1,1 开始)上有 m 个探测器,每个探测器有个探测半径 r ,问这 nn 个点中有多少个点能被探测到。 输入格式 第一行 3 个整数 n,m,r。 接下来 m 行&…...
JVM双亲委派机制
双亲委派模型是一种组织类加载器之间关系的一种规范,他的工作原理是:如果一个类加载器收到了类加载的请求,它不会自己去尝试加载这个类,而是把这个请求委派给父类加载器去完成,这样层层递进,最终所有的加载请求都被传到最顶层的启动类加载器中,只有当父类加载器无法完成这个加载…...
思科模拟器实验合集
目 录 实验一 常用网络命令的使用.................................... 1 实验二 双绞线制作.................................................. 12 实验三 网络模拟软件.............................................. 15 实验四 交换机基本配置..................…...
18.AUTOSAR 网络管理系统(一)
目录 1.为什么需要整车网络管理 2.本地唤醒和网络唤醒 3.小结 1.为什么需要整车网络管理 在描述AUTOSAR网络管理细节前,大家可以思考几个问题: 1.网络管理为整车系统提供了什么样的服务? 2.整车网络视角看,每个ECU的上下电是…...
802.11 MAC帧介绍
控制帧 RTS(Request To Send):用于申请无线媒介的使用时间CTS(Clear To Send):用于回复RTS帧ACK:对MAC帧的肯定确认PS-POLL:STA用于从AP中获取因省电模式而缓存的数据,只…...
【高阶数据结构】B-树详解
文章目录 1. 常见的搜索结构2. 问题提出使用平衡二叉树搜索树的缺陷使用哈希表的缺陷 3. B-树的概念4. B-树的插入分析插入过程分析插入过程总结 5. B-树的代码实现5.1 B-树的结点设计5.2 B-树的查找5.3 B-树的插入实现InsertKey插入和分裂测试 6. B-树的删除(思想&…...
elementui常用组件-个人版(间断更新)
Dialog 对话框 el-dialog <el-dialogtitle"提示":visible.sync"dialogVisible"width"30%":before-close"handleClose"><span>这是一段信息</span><span slot"footer" class"dialog-footer"…...
无人机在化工消防救援中的应用,消防无人机应用场景分析
火灾对社会环境具有较大影响,因此需要重视消防灭火救援工作,注重现代化技术的运用,将无人机应用到救援过程并保障其应用质量。无人机是一项重要技术,便于消防灭火救援操作,使救援过程灵活展开,排除不利影响…...
java设计模式- 建造者模式
一 需求以及实现方式 1.1 需求描述 我们要创建一个表示汽车的复杂对象,汽车包含发动机、轮胎和座椅等部分。用传统方式创建,代码如下 1.2 传统实现方式 1.抽象类 public abstract class BuildCarAbstaract {//引擎public abstract void buildEng…...
【C++航海王:追寻罗杰的编程之路】类与对象你学会了吗?(下)
目录 1 -> 再谈构造函数1.1 -> 构造函数体赋值1.2 -> 初始化列表1.3 -> explicit关键字 2 -> static成员2.1 -> 概念2.2 -> 特性 3 -> 友元3.1 -> 友元函数3.2 -> 友元类 4 -> 内部类5 -> 匿名对象6 -> 拷贝对象时的一些编译器优化 1 -…...
解决TSP旅行商问题3个可以用Python编程的优化路径算法
旅行商问题(Traveling Salesman Problem, TSP)是一个经典的组合优化问题,它要求找到访问一系列城市并返回起点的最短可能路线,同时每个城市仅访问一次。这个问题是NP-hard的,意味着没有已知的多项式时间复杂度的精确算…...
10英寸安卓车载平板电脑丨ONERugged车载工业平板:解决农业工作效率
农业是人类社会的基石之一,而农业工作效率的提升一直是农民和农业专业人士关注的重要议题。随着技术的不断进步,车载工业平板成为了解决农业工作效率的创新解决方案。本文将探讨车载工业平板如何为农业带来巨大的改变,提高农民的工作效率和农…...
Mysql报错:too many connections
1 问题原因 MySQL报错“too many connections”通常是由于数据库的最大连接数超过了MySQL配置的最大限制。有以下几个原因: (1)访问量过高:当MySQL服务器面对大量的并发请求时,已经建立的连接数可能会不足以处理所有的请求,从而导致连接池耗尽、连接被拒绝、出现“too …...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
Python 高效图像帧提取与视频编码:实战指南
Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...
数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)
目录 🔍 若用递归计算每一项,会发生什么? Horners Rule(霍纳法则) 第一步:我们从最原始的泰勒公式出发 第二步:从形式上重新观察展开式 🌟 第三步:引出霍纳法则&…...
