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基本属性

属性属性属性
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()

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

高考志愿填报模拟系统的功能和技术总结

一、金秋志愿高考志愿填报系统主要功能&#xff1a; 用户注册与登录&#xff1a;允许学生和家长注册账号&#xff0c;使用注册的账号登录系统。 个人信息管理&#xff1a;允许用户查看、修改个人信息&#xff0c;如姓名、性别、联系方式等。 高考成绩输入&#xff1a;学生输…

《MySQL 简易速速上手小册》第1章:MySQL 基础和安装(2024 最新版)

文章目录 1.1 MySQL 概览&#xff1a;版本、特性和生态系统1.1.1 基础知识1.1.2 重点案例1.1.3 拓展案例 1.2 安装和配置 MySQL1.2.1 基础知识1.2.2 安装步骤1.2.3 重点案例1.2.4 拓展案例 1.3 基础命令和操作1.3.1 基础知识1.3.2 重点案例1.3.3 拓展案例 1.1 MySQL 概览&#…

STM32的分类和选型

F系列&#xff08;主要用于普通应用&#xff09; STM32F0xx&#xff1a;低成本、低功耗&#xff0c;适用于成本敏感和低功耗的应用。STM32F1xx&#xff1a;中低端微控制器&#xff0c;具有丰富的外设和良好的性能。STM32F2xx&#xff1a;高性能微控制器&#xff0c;适用于要求…

【C语言】位与移位操作符详解

目录 1.⼆进制和进制转换 ①十进制&#xff1a;生活中最常用 ②二进制&#xff1a;计算机中使用的&#xff0c;每个数字称为一个比特 ③八进制、十六进制也如上 ④二进制转十进制 ⑤十进制转二进制 ⑥二进制转八进制 ⑦二进制转十六进制 2.原码、反码、补码 3.移位操…

32USART串口

目录 一.通信接口 二.时序 三.USART简介 ​编辑四.数据帧 五.起始位侦测和采样位置对齐 &波特率计算 六.相关函数 七.编码格式设置 &#xff08;1&#xff09; UTF-8编码&#xff08;有的软件兼容性不好&#xff09;​编辑 &#xff08;2&#xff09;GB2312编码 八.…

MySQL之建表操作

华子目录 表操作创建表数据类型文本类型数值类型日期/时间类型Bit数据类型常见数据类型 MySQL存储引擎创建表的三个操作创建表时指定存储引擎&#xff0c;字符集&#xff0c;校对规则&#xff0c;行格式 查看表显示数据库中所有表显示数据库中表的信息&#xff08;表结构&#…

Java实现教学过程管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2.3.1 教师功能如下2.3.2 学生功能如下 三、系统展示 四、核心代码4.1 查询签到4.2 签到4.3 查询任务4.4 查询课程4.5 生成课程成绩 六、免责说明 一、摘要 1.1 项目介绍 基于JAVAVu…

2023:AI疯狂进化年

嘿&#xff0c;大家好&#xff01;让我们一起来回顾一下这疯狂的 2023 年吧&#xff01;记得那个二月初吗&#xff1f;ChatGPT 上线了&#xff0c;然后呢&#xff1f;短短两个月&#xff0c;用户数量就像火箭一样突破了 1 亿&#xff01;这速度&#xff0c;简直比超级赛亚人还快…

设置打印机

一、打开控制面板的设备和打印机选项 二、点击其中的添加打印机选项 三、点我所需的打印机未列出 四、使用IP地址或主机名添加打印机 五、输入IP

python将Word页面纸张方向设置为横向

通过python-docx的章节属性&#xff0c;就可以更改纸张方向、纸张尺寸。 import docx from docx.enum.section import WD_ORIENT from docx.shared import Cmdocument docx.Document() section document.sections[0]# 设置纸张大小为A4大小 section.page_width Cm(21) sect…

稳压二极管应用电路

稳压二极管比较特殊&#xff0c;基本结构与普通二极管一样&#xff0c;也有一个PN结。由于制造工艺的不同&#xff0c;当这种PN结处于反向击穿状态时&#xff0c;PN结不会损坏(普通二极管的PN结是会损坏)&#xff0c;在稳压二极管用来稳定电压时就是利用它的这一击穿特性。 由…

泰克示波器(TBS2000系列)数学运算功能使用

目录 1 数学运算菜单1.1 运算符选择1.2 信源选择1.3 数学运算结果 1 数学运算菜单 Math运算按钮&#xff0c;用于实现对两个通道的信号进行实时的“加、减、乘”运算&#xff0c;计算时信源1在前面&#xff0c;信源2在运算符的右边&#xff0c;设置时设置信源与运算符就行了。…

请查收,你的2023京东零售技术年度好文

新春佳节&#xff0c;万象更新&#xff01;京东零售技术在2023年度发布文章内容145篇&#xff0c;全年阅读量超过20万次&#xff5e;衷心感谢每一位读者一直以来的关注和支持。 在新春到来之际&#xff0c;我们精选年度好文分享给大家&#xff0c;希望大家温故知新&#xff0c…

HarmonyOS 鸿蒙应用开发(十、第三方开源js库移植适配指南)

在前端和nodejs的世界里&#xff0c;有很多开源的js库&#xff0c;通过npm(NodeJS包管理和分发工具)可以安装使用众多的开源软件包。但是由于OpenHarmony开发框架中的API不完全兼容V8运行时的Build-In API&#xff0c;因此三方js库大都需要适配下才能用。 移植前准备 建议在适…

bert+np.memap+faiss文本相似度匹配 topN

目录 任务 代码 结果说明 任务 使用 bert-base-chinese 预训练模型将文本数据向量化后&#xff0c;使用 np.memap 进行保存&#xff0c;再使用 faiss 进行相似度匹配出每个文本与它最相似的 topN 此篇文章使用了地址数据&#xff0c;目的是为了跑通这个流程&#xff0c;数…

DoWhy:Python 中的因果推断库

DoWhy&#xff1a;Python 中的因果推断库 DoWhy 是一个强大的 Python 库&#xff0c;用于因果推断和因果推断分析。本文将介绍 DoWhy 的基本概念、主要功能和使用方法&#xff0c;帮助读者了解如何利用该库进行因果推断&#xff0c;并解决因果关系的相关问题。 什么是DoWhy&…

AI-数学-高中-24-三角函数一般形式的各参数含义

原作者视频&#xff1a;三角函数】12三角函数一般形式的各参数含义&#xff08;易&#xff09;_哔哩哔哩_bilibili 1.函数中的A标识符&#xff1a;表示曲线中间平衡位置的振幅&#xff0c;值域为正负A&#xff1a;[-A,A]。 2.函数中的B标识符&#xff1a;决定曲线纵向上下平移…

python实现中国剩余定理

中国剩余定理又称孙子定理&#xff0c;是数论中一个重要定理。最早可见于我国的数学著作《孙子算经》卷下“物不知数”问题&#xff0c;原文如下&#xff1a; 有物不知其数&#xff0c;三三数之剩二&#xff0c;五五数之剩三&#xff0c;七七数之剩二。问物几何&#xff1f;即…

一步步建立一个C#项目(连续读取S7-1200PLC数据)

这篇博客作为C#的基础系列,和大家分享如何一步步建立一个C#项目完成对S7-1200PLC数据的连续读取。首先创建一个窗体应用。 1、窗体应用 2、配置存储位置 3、选择框架 拖拽一个Button,可以选择视图菜单---工具箱 4、工具箱 拖拽Lable控件和TextBook控件 5、拖拽控件 接下来…

Linux文件和目录管理

目录基础 Linux操作系统以目录的方式来组织和管理系统中的所有文件。所谓的目录&#xff0c;就是将所有文件的说明信息采用树状结构组织起来。每个目录节点之下会有文件和子目录。 所有一切都从 ‘根’ 开始&#xff0c;用 ‘/’ 代表, 并且延伸到子目录。 bin&#xff1a;B…