Html5用Canvas制作绘图板

news/2024/11/15 3:04:07/
需求:
  1. 绘制多边形
  2. 可填充颜色
  3. 可设置文字
  4. 可移动,可删除
  5. 鼠标按住后,抬起之前线段应该跟随鼠标当前位置
  6. 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示相应的图形
思考:
  1. 第一想到的是找现成的改一改,找来找去,就觉得fabricjs还可以,不过研究了一下,发现例子太少,很难短时间内上手
  2. 想到了最近一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到很快就上手了
结果:
一天半时间完成,效果如下:

注意:
  1. 不要使用style或者css对canvas的width和height设置值,否则会引起坐标等被放大的问题
  2. 使用jquery获取canvas的时候要使用 “$('#canvas').get(0)”,否则则取不到相应的对象
  3. 调色板使用的是“spectrum.js”
  4. 取值赋值采用json模式,使用过的是“jquery.json-2.4.js”
  5. 采用json赋值的时候,由于我对图形进行了js封装类,且带有自定义方法,所以在赋值的时候会出现不认自定义方法的问题,原因为解析json的时候,对象会被解析为object而不是我定义的对象,所以需要人为处理一下
  6. 全部代码+HTML一共600行,这在以前是我完全不敢想象的,HTML5会带给我们怎样的未来呢?值得期待。



http://www.ppmy.cn/news/251529.html

相关文章

creo绘图属性模板_CREO工程图模板创建

几乎所有的工程图设计,都必须在同一个环境下进行。而CREO并没有针对中国制定相应的工程图模板,因此本节来介绍工程图模板的创建。 1打开creo,新建文件,选择【格式】,命名名称,文件名称建议如图所示。图示:a2指的是图纸大小,h指的是横向(e指的是纵向),prt指的是零件图模…

MATLAB论文绘图模板与尺寸设置

MATLAB论文绘图模板与尺寸设置 MATLAB图形绘制尺寸设置figure和axes中属性Position的定义与使用figure及axes属性修改的三种方式图形导出理想尺寸的最方便的方法 MATLAB绘图模板,以3子图12cm宽的函数输出为例参考文献 MATLAB图形绘制尺寸设置 首先我们需要清楚MATL…

Python绘图(模板)

目录 2D绘图 折线图 条形图 直方图 散点图 饼图 堆积条形图 ​编辑 对称条形图 3D绘图 3D散点图 3D条形图 附录: 颜色表color 图标marker" " 固定代码模版 2D绘图 折线图 import matplotlib.pyplot as plt #上一行代码也可替换为 i…

js实现的在线绘图板,写字板

一个像素完美的基于web的MS Paint重制版和更多…试试看! JS Paint高度逼真地再现了MS Paint的每个工具和菜单,甚至是鲜为人知的功能。 它支持主题、其他文件类型和辅助功能,如眼睛注视模式和语音识别。 在线demo地址在线绘图板,在…

绘图板程序设计及其具体实现

成果展示 首先展示几个使用本绘图板程序的绘图成果。 下面是程序的功能介绍(也是由本绘图板程序绘制的)。 #总体架构 由三个包和一个主窗口类构成,utils包中为绘制图形中用到的所有工具类,element包中为所有的图形元素类&#x…

MFC绘图板(二)

接上篇《MFC绘图板(一)》:http://blog.csdn.net/wwkaven/article/details/40657709 1、为使程序更美观,添加纸张效果: (1)在CBottomFormView中添加一个成员变量: UINT m_nPaperBor…

MFC 绘图板

源码下载: http://download.csdn.net/detail/dai_jing/6041993

MFC绘图板(三)

1、接前文《MFC绘图板(二)》 2、本以为用MFC实现一个绘图程序很简单,但是实际做起来却遇到了许多问题,下面对开发过程中的一些问题记录如下: 3、首先,介绍以下MFC绘图板实现的功能: &#xff0…