JavaScript实现涂鸦笔功能
作者:短发少女?(ˉ?ˉ?) 发布时间:2024-04-10 11:01:01
标签:js,涂鸦笔
本文实例为大家分享了JavaScript实现涂鸦笔的具体代码,供大家参考,具体内容如下
1、html部分、css部分
1.1 实现一个画框
<canvas id="draw" width="800" height="800">
</canvas>
1.2 css部分
<style>
html,body{
margin:0;
}
canvas{
border:1px solid black;
}
</style>
2、JS部分
2.1 先让canvas是个画框,然后处理事件监听
const canvas = document.querySelector("#draw");
canvas.addEventListener("mousedown",(e)=>{
});
canvas.addEventListener("mouseup",(e)=>{
});
canvas.addEventListener("mouseover",(e)=>{
});
canvas.addEventListener("mouseleave",(e)=>{
});
2.2 对监听事件进行处理
2.2.1 首先要先设置一个值,确保是鼠标点击后才会实现画图
let drawing = false;
let x = 0, y = 0 ;
canvas.addEventListener("mousedown",(e)=>{
drawing = true;
[x,y] = [e.offsetX,e.offsetY];//这个是为了让鼠标点下去之后,要记住点的位置-----记住鼠标开始的点,方便连成线
});
canvas.addEventListener("mouseup",(e)=>{
drawing = false;
});
canvas.addEventListener("mouseover",(e)=>{
//判断如果drawing为真,就返回值,console一下
if(!drawing) return;
console.log("draw");
});
canvas.addEventListener("mouseleave",(e)=>{
drawing = false;
});
2.3 实现画笔的粗细变化、画笔颜色的变化
let colorDeg = 0; //为了实现使用hsl(hsl的颜色是角度取值的)的颜色取值
let lineWidth = 50; //画笔粗细的定义
let direction = 1; //方便变大变小,取反值用的
//让上面那些值,赋值给画布ctx的值上
let ctx = canvas.getContext("2d");
ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;//颜色的值
ctx.lineWidth = lineWidth;//线的粗细
ctx.lineCap = "round";
ctx.lineJoin = "round";
canvas.addEventListener("mouseover",(e)=>{
//判断如果drawing为真,就返回值,console一下
if(!drawing) return;
console.log("draw");
//颜色操作
colorDeg = colorDeg < 360 ? colorDeg + 1 : 0 ;
ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;
//粗细的更改
if(lineWidth < 1 || lineWidth > 50){
direction = direction * (-1);
}
lineWidth += direction;
ctx.lineWidth = lineWidth;
});
2.4 以上仅实现画笔的逻辑变化,我们还需要让画笔显示出来
2.4.1 首先创建一个新的路径
ctx.beginPath();//新路径的起点。
2.4.2 记录一开始点的位置
ctx.moveTo(x,y);
2.4.3 路径的终点
ctx.lineTo(e.offsetX,e.offsetY);
2.4.4 重新定义鼠标按下时的[x,y]的位置
[x,y] = [e.offsetX,e.offsetY];
2.4.5 实现了点的位置获取,需要再来一个函数来连接他们
ctx.stroke();//这是画出线的方法,没有这个方法,画不出线
来源:https://blog.csdn.net/weixin_44364634/article/details/122683496
0
投稿
猜你喜欢
- Python在程序并行化方面多少有些声名狼藉。撇开技术上的问题,例如线程的实现和GIL,我觉得错误的教学指导才是主要问题。常见的经典Pyth
- 一、APC缓存简介APC,全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”。它为我们提供了缓存和优化PHP的中
- 数组使用简介原文地址:30 Days of Mootools 1.2 Tutorials - Day 3 - Intro to Using
- 翻译自StackOverflow中一个关于Python异常处理的问答。问题:为什么“except:pass”是一个不好的编程习惯?我时常在S
- 写在前面 最近和几个小伙伴们在写字节跳动第五届青训营后端组的大作业。虽然昨天已经提交了项目,但有很多地方值得总结一下,比如这一篇,
- 前言schedule是一个第三方轻量级的任务调度模块,可以按照秒,分,小时,日期或者自定义事件执行时间。如果想执行多个任务,也可以添加多个t
- 前言gRPC 这项技术真是太棒了,接口约束严格,性能还高,在 k8s 和很多微服务框架中都有应用。作为一名程序员,学就对了。之前用 Pyth
- 不知道工商银行帐号是否是这样的格式, 如果错了请大家见谅!<script language="javascript"
- 前言作为Web开发人员,在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下,可供我们使用就是Loc
- 1.概述ChatGPT是一款基于GPT-3.5架构的大型语言模型,它能够进行自然语言处理和生成对话等任务。作为一款智能化的聊天机器人,Cha
- 闭包是Python装饰器的基础。要理解闭包,先要了解Python中的变量作用域规则。变量作用域规则首先,在函数中是能访问全局变量的:>
- function BrowseFolder(){ try{ var Message = "请选择文件夹"; //选择框提
- 建立资料表:Step1首先开启phpmyadmin,进入wordpress资料库中,并新增一个wp_gbook的资料表与栏位数目8。Step
- 本质是一个普通的js对象,用于描述视图界面结构的,在mouted的回调中,可以输出_vnode, 通过图可以知道,_vnode中有
- 写在前面大家好,我是第一次python学了一个学期,期末要完成一个毕业生信息管理系统大作业的小韩了,由于上次没有仔细看开发实现的要求,实现了
- 一 描述720. 词典中最长的单词 - 力扣(LeetCode) (leetcode-cn.com)给出一个字符串数组 words
- 结合网上的资料,自己亲自的去安装了一次MySQL,安装版本是win7x64 5.7.16。在安装过程中出现并解决了如下问题:“mysql 服
- 1.今天在看JavaScript学习指南的时候做的课后习题,也因此详细的对函数的传入参数进行比较深入的研究.题目如下:函数如何才能修改其作用
- 0.配置依赖环境,如果不进行这步可能会出现一些问题中间可能有多余空格,去除下再运行,一般都能安装成功,如果不能可以先更新下sudo apt-
- 本文实例讲述了Python实现字典排序、按照list中字典的某个key排序的方法。分享给大家供大家参考,具体如下:1.给字典按照value按