一起做一款好玩的绘图工具

已于 2023-11-09 10:57:09 修改
阅读量78 收藏
点赞数
文章标签： 前端 ui javascript python 人工智能
于 2023-11-09 10:55:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/INiubi/article/details/134306367
版权

本人开发小白，在学习前端知识编写一个绘图小工具的时候，突发灵感，一个的想象力有限，我做的一个雏形，在此基础上拜谢CSDN中的开发大佬一起完善这个绘图工具，此工具未来不管做成什么样，都不会用于商业，供大家免费使用，在此，我牵个头，有想法的大佬，都可以在下面更新换代代码，并附带界面效果！谢谢

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>绘图工具</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f7f7f7;

text-align: center;

margin: 0;

padding: 0;

}

h1 {

color: #333;

}

#toolbar {

background-color: #fff;

padding: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

#canvas {

border: 1px solid #ccc;

}

#actions {

margin-top: 10px;

}

#actions button {

margin: 5px;

}

.animated {

animation-duration: 2s;

animation-timing-function: ease;

animation-iteration-count: infinite;

}

@keyframes move {

0% { transform: translateX(0); }

50% { transform: translateX(200px); }

100% { transform: translateX(0); }

}

</style>

</head>

<body>

<h1>绘图工具</h1>

<div id="toolbar">

<button id="penTool">钢笔</button>

<button id="brushTool">毛笔</button>

<button id="rectangleTool">矩形</button>

<button id="circleTool">圆形</button>

<input type="color" id="colorSelect">

<input type="number" id="lineWidthSelect" min="1" max="20" value="2">

</div>

<canvas id="canvas" width="800" height="600"></canvas>

<div id="actions">

<button id="undoButton">撤销</button>

<button id="redoButton">重做</button>

<button id="saveButton">保存</button>

<input type="file" id="imageInput" accept="image/*">

</div>

<script>

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const penTool = document.getElementById('penTool');

const brushTool = document.getElementById('brushTool');

const rectangleTool = document.getElementById('rectangleTool');

const circleTool = document.getElementById('circleTool');

const colorSelect = document.getElementById('colorSelect');

const lineWidthSelect = document.getElementById('lineWidthSelect');

const undoButton = document.getElementById('undoButton');

const redoButton = document.getElementById('redoButton');

const saveButton = document.getElementById('saveButton');

const imageInput = document.getElementById('imageInput');

const actions = [];

let currentAction = -1;

let drawing = false;

let isPenTool = true;

let animatedElement = null;

canvas.addEventListener('mousedown', (e) => {

drawing = true;

ctx.beginPath();

ctx.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);

});

canvas.addEventListener('mousemove', (e) => {

if (!drawing) return;

if (isPenTool) {

ctx.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);

ctx.stroke();

canvas.classList.add('animated');

canvas.style.animationName = 'move';

}

});

canvas.addEventListener('mouseup', () => {

drawing = false;

if (isPenTool) {

ctx.closePath();

saveAction();

canvas.classList.remove('animated');

}

});

penTool.addEventListener('click', () => {

isPenTool = true;

});

brushTool.addEventListener('click', () => {

isPenTool = false;

ctx.lineCap = 'round';

ctx.lineJoin = 'round';

});

rectangleTool.addEventListener('click', () => {

isPenTool = false;

});

circleTool.addEventListener('click', () => {

isPenTool = false;

});

colorSelect.addEventListener('input', () => {

ctx.strokeStyle = colorSelect.value;

});

lineWidthSelect.addEventListener('input', () => {

ctx.lineWidth = lineWidthSelect.value;

});

undoButton.addEventListener('click', undo);

redoButton.addEventListener('click', redo);

saveButton.addEventListener('click', saveCanvas);

imageInput.addEventListener('change', (e) => {

const file = e.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function (e) {

const image = new Image();

image.src = e.target.result;

image.onload = function () {

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

};

};

reader.readAsDataURL(file);

}

});

function saveAction() {

actions.splice(currentAction + 1);

currentAction++;

actions.push(canvas.toDataURL());

}

function undo() {

if (currentAction > 0) {

currentAction--;

const img = new Image();

img.src = actions[currentAction];

img.onload = () => {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(img, 0, 0);

}

}

}

function redo() {

if (currentAction < actions.length - 1) {

currentAction++;

const img = new Image();

img.src = actions[currentAction];

img.onload = () => {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(img, 0, 0);

}

}

}

function saveCanvas() {

const img = new Image();

img.src = canvas.toDataURL();

const link = document.createElement('a');

link.href = img.src;

link.download = 'drawing.png';

link.click();

}

</script>

</body>

</html>

效果图：

INiubi
关注
用canvas实现一个简易绘图工具
qq_43028185的博客
12-10 1106
先看效果 这里可以选择颜色，从而进行在600px*400px画布中，随便画 ★HTML架构部分 <!-- HTML架构部分 --> <div> <h3>简易绘图工具</h3> <canvas id="canvas" width="600px" height="400px"></canvas>...
作为一名程序员，我都收集了哪些好玩的神器工具？
涛哥聊Python
04-14 1994
点击上方蓝色小字，关注“涛哥聊Python”重磅干货，第一时间送达【导语】不久前，一款名为 "狗屁不通" 的文章生成器在 GitHub 开源后大火，具体内容可查看我们...
python图形编程代码大全_可以用 Python 编程语言做哪些神奇好玩的事情？
weixin_39753791的博客
11-23 538
先看一看上面这个是干嘛的！！！！！不知道往下看！————————鉴于问题是编程语言可以做哪些神器好玩的事，我先把Python可以应用于哪些领域和使用了哪些框架技术整理出来，然后再给大家收集可以用于的神器好玩的事，也希望大家留言给我，我补充给大家。本文分为两部分：第一部分：可以用 Python 编程语言做哪些神奇好玩的事情？你想更深入了解学习Python知识体系，你可以看一下我们花费了一个多月整理了...
C++经典绘图工具EasyX
diaozhu1028的博客
06-08 2376
EasyX简介 EasyX 在学习C语言时，很多同学抱怨说C只能写最简单的Demo程序，通过printf在屏幕上打印字符来验证代码。这样的编程很枯燥，一点没觉得自己在设计软件。 EasyX是针对C++的第三方图形库，通过它我们能够在屏幕上绘制出自己喜欢的各种颜色的图形。有了它，自己编写好玩的小游戏不是梦哦。 使用EasyX有下面几点要求： 只能在Windows下...
作为一名程序员，我都收集了哪些好玩的生成器？
GitHubDaily
12-04 774
公众号关注“GitHubDaily”设为 “星标”，带你了解技术圈内新鲜事【导语】不久前，一款名为 "狗屁不通" 的文章生成器在 GitHub 开源后大火，具体内容可...
全部python编程语言-可以用 Python 编程语言做哪些神奇好玩的事情？
weixin_37988176的博客
11-01 131
贪吃蛇、迷宫、吃豆人、扫雷、Flappy Bird...这些游戏可以是非常经典，甚至伴随着很多人的童年回忆。那么，你是否想过自己开发一款专属游戏？是否思考过开发这样一款游戏需要多少工作量？游戏开发在互联网行业算是一个门槛较高的方向，因此，对于非专业的游戏开发者来说，开发一款游戏一直是一件让人望而却步的事情，遥不可及。那么，今天要介绍的这款Python项目就可以轻松实现你成为游戏开发者的想法，实现前...
国外有哪些好用的AI工具？
Hanko的专栏
08-19 3305
2022年，ChatGPT闪亮登场，瞬间成为备受瞩目的潮流话题！尤其是当OpenAI推出基于GPT-3.5模型的ChatGPT版本后，这款产品凭借其惊人的对话能力和广泛的应用潜力，立即在大众中掀起了一股狂潮。从那一刻起，ChatGPT以其强大的自然语言处理技能，如一颗流星般划破夜空，瞬间吸引了全球大量用户的热情追捧，掀起了一场引人注目的人工智能革命！今天，我就要带你一起探索一下国外有哪些好用的AI工具，让你感受一下AI的魅力和乐趣。不要犹豫，跟我一起来吧！
python语言可以编程游戏么_可以用 Python 编程语言做哪些神奇好玩的事情？
weixin_39611275的博客
12-08 121
贪吃蛇、迷宫、吃豆人、扫雷、Flappy Bird...这些游戏可以是非常经典，甚至伴随着很多人的童年回忆。那么，你是否想过自己开发一款专属游戏？是否思考过开发这样一款游戏需要多少工作量？游戏开发在互联网行业算是一个门槛较高的方向，因此，对于非专业的游戏开发者来说，开发一款游戏一直是一件让人望而却步的事情，遥不可及。那么，今天要介绍的这款Python项目就可以轻松实现你成为游戏开发者的想法，实现前...
好玩的黑科技app：推荐5款功能逆天的黑科技应用！
热门推荐
教程大咖的CSDN创作中心
11-20 1万+
1、 讯飞朗读助手 可以说是为需要听力服务人士提供的非常人性化的帮助了！这款软件不是输入，而是帮助用户将文字转化为可输出的语音，让用户能够轻松的浏览网页，看TXT文档。磁性男声、婉转女声、标准英语全都有，满足用户的各种语音需求。   2、 Tailor 支持IOS系统。解决了由于iOS系统限制，无法在APP内截取长图的问题。它可以把IOS用户的多张截屏智能地合并在一起，变相实现了跨应用...
python画正方形-用python画一个正方形
weixin_37988176的博客
11-01 1万+
广告关闭2017年12月，云+社区对外发布，从最开始的技术博客到现在拥有多个社区产品。未来，我们一起乘风破浪，创造无限可能。我正在学习python学习教程，我无法打开屏幕进行绘图。 我没有发现错误，它只是显示程序完成了运行。 代码如下：import turtle #acutally called turtle to draw a turtle beautiful also used todraw ...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9233
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
分析了 6000 款 App，竟有这么多佳软神器没用过
简书博客搬家测试账号
12-04 1760
欢迎关注天善智能，我们是专注于商业智能BI，人工智能AI，大数据分析与挖掘领域的垂直社区，学习，问答、求职一站式搞定！ 对商业智能BI、大数据分析挖掘、机器学习，python，R等数据领域感兴趣的同学加微信：tstoutiao，并注明消息来源，邀请你进入数据爱好者交流群，数据爱好者们都在这儿。 作者：  苏克1900 公众号：第2大脑 摘要：...
新媒体工作者必备常识
blotemj.blog.csdn.net
01-05 1592
一、灵感来源 1、舆情数据 2、微信搜索 3、抖音搜索 4、营销资讯 5、行业数据 二、图片素材 1、静态图片 2、在线制图 3、动态图片 4、动态制作 5、矢量图标 6、识图找图 7、图片处理 三、搜索引擎 1、搜索引擎 四、变现渠道 1、微商 2、知识变现 3、软文广告 五、运营工具 1、账号管理 2、排版工具 3、短链接 4、二维码生成 5、协作工具 6、笔记工具 7、思维导图 8、调查问卷 9、H5制作 10、小程序...
简单且有创意的python作品,python创意项目设计方案
2401_84503581的博客
04-21 2338
草莓熊，英文名Lotso，迪士尼公司和皮克斯动画工作室公司于2010年合作推出的动画片《玩具总动员3》（Toy Story3）的反派角色。（草莓熊简介配图来源于网络《玩具总动员3》，版权属《玩具总动员3》，此处仅作介绍人物绘图前形象介绍用途）​​草莓熊本来拥有一个幸福的家庭：爱他的主人小女孩黛西，粉红色如梦如幻的世界python工程师考什么证书。黛西很爱陪伴她的玩具，尤其是草莓熊，他最受宠爱。黛西和草莓熊整天形影不离，他们是世界上最亲密的孩子和玩具。​。
前端 Flex 布局语法详解
最新发布
ning的博客
11-10 559
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
WPF+MVVM案例实战与特效（二十五）- 3D粒子波浪效果实现
lingshuangcanxue
11-05 368
使用WPF的3D控件以及动画效果实现3D粒子波浪的特效
基于 SpringBoot 实现QQ邮箱验证码注册功能
2301_79201049的博客
11-06 638
找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。（1）首先打开QQ邮箱，点击设置并来到账号页面。
Mybatis拦截器中获取@RequestBody表单的值修改查询SQL
十二的博客
11-06 425
Slf4j/*** 存储body数据的容器*/// 将body数据存储起来try {try {= null) {if (reader!
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 183
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
Graphics View 绘图架构来做一个绘图工具
03-21
C知道：Graphics View 绘图架构是一个强大的绘图框架，可以用来创建各种类型的绘图工具。您可以使用 QGraphicsScene 来创建一个场景，然后在场景中添加各种图形元素，如矩形、椭圆、多边形等。然后，您可以使用 QGraphicsView 来显示场景，并对其进行交互。如果您需要更高级的绘图功能，可以使用 QGraphicsItem 类来创建自定义图形元素。如果您需要更多的控制权，可以使用 QGraphicsWidget 类来创建自定义小部件。总之，Graphics View 绘图架构是一个非常灵活和强大的绘图框架，可以满足各种绘图需求。 关于 "lua closure factory 完整代码" 和 "中文加密" 的问题，我需要更多的上下文信息才能回答。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值