首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5做个画图

首先要说明是这里不是用鼠标画画,而是在触摸设备上用手指,比如ipad。 做画图板,自然使用html5canvas来实现了。在canvas中我们可以画圆,画矩形,画自定义线条等等。...这次主要使用画圆跟画线条来实现。html中支持对触摸事件响应。...IPAD上效果: 思路:当手指触摸到屏幕时候在onTouchStart 事件中在手指触摸位置上添加一个圆;当手指开始滑动时候在onTouchMove中不断从上一个触摸点到下一个点画线条。...HTML: <!...不然滑动时就会触发浏览器默认滑动事件,就会发生页面下拉效果,你就画不了画喽。 后续: 后面我会结合phonegap,把这个html5网页封装成app搬到android,ios,wp上去。

78520

基于HTML5 Canvas和jQuery 画图工具实现

https://louluan.blog.csdn.net/article/details/38490589 简介 HTML5 提供了强大Canvas元素,使用Canvas并结合...本文就介绍一下基于HTML5 Canvas 画图工具实现。废话少说,先看成品: ?...类似地,绘画直线和添加文字也是通过HTML伪装逻辑: 绘画直线时,用户在画板上拖动并按下鼠标时,动态地显示出一条使用HTML伪装直线,可以随着用户鼠标的移动而变化,当用户松开鼠标时,对应模拟直线...HTML元素隐藏,调用javavscript绘制真正直线; 添加文字时,这里使用元素 进行模拟文本输入框,当用户在画板上添加文字时,可以拖动鼠标设置输入框大小,然后输入文字,...(PS:对此比较困惑读者可以自行查找关于HTML 图片 BASE64 存储相关问题,这个知识点还是很重要)       undo redo 原理实际上很简单,就是当每执行一次绘画,则将画板内容转换成

2.9K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    程序画图神器推荐

    开源、免费、简洁、方便画图工具,可作为visio或亿图替代品drawio简介在流程图、思维导图、UML图等图表绘制领域,draw.io可以说是一款优秀和受欢迎在线作图工具。...强大易用编辑体验使得draw.io受到广大用户喜爱。功能特点流畅绘图体验draw.io拥有创新绘图引擎,可实现流畅绘图操作。拖拽元素非常顺畅,支持无限画布扩展。...强悍性能确保了良好用户体验。丰富图表元素和模板 内置了流程图、网络图、UML图、思维导图、甘特图等丰富图表类型。预设了多种元素样式,图表模板。极大减少制图时间。...总结draw.io可以说是新一代在线作图工具典范。它云端化应用架构为用户带来无与伦比协作体验。强大编辑引擎与优秀用户体验设计相结合,打造出色作图平台。...是否需要绘制各类专业图表,draw.io都将是你最佳选择。它将为我们带来全新高效、便捷绘图工作方式。

    13010

    推荐3款程序员常用画图工具

    前言 经常看到有小伙伴在DotNetGuide技术社区微信交流群里问:有什么好用画图工具推荐?今天大姚给大家推荐3款程序员日常工作中常用画图工具,大家可以根据自己需求选择。...在线访问地址:https://www.processon.com/ 丰富图形素材库: 免费好用模板众多: Excalidraw Excalidaw是一个开源虚拟协作白板画图工具,可让你轻松绘制具有手绘感觉图表...可用于创建流程图、组织结构图、网络图、原型图等各种类型图表。它提供了丰富图形库和易于使用界面,让用户可以轻松地创建复杂图表或者流程图。...在线访问地址:https://app.diagrams.net/ 桌面版下载地址:https://github.com/jgraph/drawio-desktop/releases 大量模板: 程序员常用工具软件...以上3款工具都已收录到程序员常用工具软件栏目中,欢迎关注该栏目发现更多优秀实用开发工具!

    31210

    5 款程序画图神器,全免费!

    程序日常工作中,有两大难题:一曰写文档,二曰画图。此前我们策划了多篇技术文档写作指南文章和架构画图技巧文章,有效地帮助到了广大开发者朋友。 点击文章标题即可跳转阅读: 《程序员必备!...今天我们为大家精心分享了 5 款鹅厂程序员亲测好用画图工具,重点是这 5 款工具全部开源免费,如果觉得对你有帮助,希望能在文末得到你一键三连~ 关注腾讯云开发者,一手技术干货提前解锁 01、Draw.io...自定义形状和模板:用户可以创建并保存个性化设计。 多格式导出:支持导出 PDF 、 SVG 、 PNG 、 JPEG 以及 HTML 等多种格式。...,它特点在于提供了一种手绘风格图片输出形态,绘图体验简单、直观却又功能丰富,非常适合用于创建图表、线框图、思维导图和流程图等等程序员日常工作中会遇到画图场景。...此外,Excalidraw 还支持与其他应用程序集成,并可通过插件系统扩展功能,包括支持脚本自定义等高级功能。同时还支持端对端加密在线协作,只需要将一个链接发送给协议方,就能实现画图在线协作。

    72133

    不会画图程序员,不是好程序员!如何画架构图?

    记得刚工作时候,领导说过一句话:一个程序员如果不会写文档和画架构图,那他永久都只是一个敲代码。 在从一个初级程序员到架构师修炼过程中,画架构图是一门必修功课。...我最开始画图时候,一直搞不清楚该画什么样图来表达,网上也找不到系统资料。 这里整理了下这些年知识储备,给一些刚迈入架构师或想要进入架构师行业同学,一点点参考。...架构图是一个统称,按视角维度,可分为:业务架构、技术架构、系统架构、应用架构,下面贴一些自己画图给大家参考,个人能力有限,如果大牛有不同看法,还请指正,大家互相交流学习。...(平台架构图) 2 技术架构 技术架构,是从架构师视角 描述服务开发使用到技术栈 (技术架构图) 3 系统架构 系统架构是从架构师视角,描述整个系统结构、分层、部署方式 (系统架构图)...这张图是挪用,非本人所画,仅为描述问题。 (业务架构图) 推荐2个在线画图工具: 1、Processon 在线版,收费,模板库比较丰富,可以克隆模板,画图比较方便。

    97810

    pandas画图几个技巧

    1、pandas画图时候颜色种类不够 我们经常会用pandas处理数据,处理完之后,很多时候会画个图看看。但是pandas默认曲线就只有十种颜色,如果我们要绘制数据过多,就会出现颜色重复。...其实很简单,pandas绘图时候有一个colors参数,我们可以对这个参数进行赋值。...FFFFFF', 'whitesmoke': '#F5F5F5', 'yellow': '#FFFF00', 'yellowgreen': '#9ACD32'} 这个字典来自于互联网,大家可以根据自己数据量和自己想要颜色来筛选这个字典...2、中文显示 在notebook中,matplotlib默认是不会显示中文,最简单办法就是加上下面这几行: import matplotlib.pyplot as plt plt.rcParams...) 3、seaborn使用 seaborn只要import了之后,绘图就会自动美化一点。

    1.6K30

    Matlab中画图函数

    更多设置 二、 图形控制与表现 1.图形窗口 (1). 图形窗口创建和选择 (2). 在一个图形窗口中绘制多个子图形 (3)....图线形式 (2). 线颜色 (3). 图线其他属性 ---- 之前在进行Matlab编程时,画图总是非常重要一部分,在这里整理一下常用绘图函数,以作备用。...图例 legend(‘a’,’Location’,’best’) 图例位置放在最佳位置 用Matlab画图时,有时候需要对各种图标进行标注,例如,用“+”代表A运动情况,“*”代表B运动情况。...legend函数基本用法是 legend(string1,string2,string3, …) 分别将字符串1、字符串2、字符串3……标注到图中,每个字符串对应图标为画图图标。...更多设置 可以在绘图窗口中打开绘图工具,Inspector… 中查找 二、 图形控制与表现 MATLAB提供用于图形控制函数和命令: axis: 人工选择坐标轴尺寸.

    3.4K20

    程序】纯javascrept、html红包雨

    “ 关键字: 纯JS红包雨 红包封面 程序员专属封面”  01— 新年来了做程序做个纯JS红包雨玩一玩; 程序快乐!  ...纯javascrept、html红包雨  介绍 html/css/js 将该项目导入开发者工具,或者直接运行 【源码下载声明】 —【源码下载声明】https://gitee.com/SmallWai/rpRain...【公众号介绍】 —【公众号介绍】程序源代码每天分享不同快乐有趣实用软件和网赚教程,源码技术,各种资料等,如果这边资源大家觉得很实用的话,请给文章底部点个赞和再看,这也是对程序源代码一种支持,如果想进群和朋友们一起讨论学习资源的话...,请扫下方二维码,加程序源代码好友,备注进群,感谢各位支持。...文章发布源代码和文章均来源于各类开源网站社区或者是小编在项目中、学习中整理一些实例项目。主要目的是将开源代码分享给喜欢编程、有梦想程序员,希望能帮助到你们与他们共同成长。

    87630

    程序员应该知道那些画图工具-第一期

    有人说 draw.io 画出来图不好看,有两方面原因,一是工程师们基本都没有什么审美,所以不会调色;二是工程师用画图工具基本只用默认样式,所以对绘图工具比较就是哪款软件默认样式好,就吹哪款。...draw.io 内置图有一些是很好看: ? drawio 这张图当时震撼了我好久,画图本质上其实是个设计问题,最近和图灵老师要来了几本设计书,等我设计功底过关时候再看看我能画出什么样图。...没想到多年后,连程序员也用这个玩艺儿来画图了。说白了他们就是喜欢这个工具默认样式嘛: ? sketch 看着确实很唬人。...用这种模式画图和写代码其实差不多: @startuml scale 512*1024 |Gateway| start repeat :record data; :wating; repeat...aws 这一期讲都是一些还算正常工具,下一期可能会讲一些加速程序员内容输出内卷绘图/视频工具。

    1.9K20
    领券