需求:
  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会带给我们如何的未来呢?值得期待。


Html5用Canvas制作画图板的更多相关文章

  1. HTML5标签canvas制作平面图

    摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢 ...

  2. 【html5】HTML5中canvas怎样画虚线

    在canvas API中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢? 现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想 ...

  3. HTML5标签canvas制作动画

    摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停 ...

  4. 利用HTML5的canvas制作万花筒动画特效

    <!DOCTYPE HTML> <html> <head> <style> #canvas{ background-color:#cccccc; } & ...

  5. canvas简单画图板

    <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title> ...

  6. html5使用canvas动态画医学设备毫秒级数据波形图

  7. html5 js canvas中画星星的函数

    function drawStar(cxt, x, y, outerR, innerR, rot) { cxt.beginPath(); ; i < ; i++) { cxt.lineTo(Ma ...

  8. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  9. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

随机推荐

  1. ORA-00600: 内部错误代码, 参数: [kqlnrc_1]

    如以下的错误: Mon Mar 31 18:45:59 2014 Errors in file /oracle/app/oracle/diag/rdbms/zscims/zscims2/trace/z ...

  2. POJ 1422 Air Raid(二分图匹配最小路径覆盖)

    POJ 1422 Air Raid 题目链接 题意:给定一个有向图,在这个图上的某些点上放伞兵,能够使伞兵能够走到图上全部的点.且每一个点仅仅被一个伞兵走一次.问至少放多少伞兵 思路:二分图的最小路径 ...

  3. Unreal Engine 4 RenderTarget制作Live Camera效果

    Unreal Engine 4 RenderTarget制作Live Camera效果 先上效果: Live Camera我不知道怎么翻译.反正意思就是将一个摄影机的Image渲染到一个2D平面上. ...

  4. 图像库---Image Datasets---OpenSift源代码---openSurf源代码

    1.Computer Vision Datasets on the web http://www.cvpapers.com/datasets.html 2.Dataset Reference http ...

  5. BZOJ 1109 POI2007 堆积木Klo LIS

    题目大意:给定一个序列,能够多次将某个位置的数删掉并将后面全部数向左串一位,要求操作后a[i]=i的数最多 首先我们如果最后a[i]=i的数的序列为S 那么S满足随着i递增,a[i]递增(相对位置不变 ...

  6. 项目之软件project(我专业四年都未曾知道这四个字的含义,几句话便懂了)

    潘鹏在CSDN上原创.如其它站点转载请注意排版和写明出处: 软件project的本质 一级标题 控制 质量 二级标题  成本  扩展  高内聚低耦合 效率 控制: 成本:企业要求的是以最快的速度完毕可 ...

  7. Struts开发问题集锦

    在struts2de 1.6以前版本,都是用<s:datepicker>标签来获取时间,1.8后可以用struts-dojo.plugin里的<sx:datetimepicker&g ...

  8. PHP计算中文字符串长度 、截取相应中文字符串

    PHP计算字符串长度     及其   截取相应中文字符串 计算字符长度: $gouWu = '美日汇http://www.hnzyxok.com/'; echo mb_strlen($gouWu,' ...

  9. NYOJ 709(ZZULIOJ1481) 异 形 卵

    题目描写叙述 我们探索宇宙,是想了解浩瀚星空的奥妙,但我们却非常少意识到宇宙深处藏匿的危急,它们无时无刻不紧盯着我们的地球.假设外星人拜訪我们,结果可能与哥伦布当年踏足美洲大陆不会有什么两样,这是历史 ...

  10. Android在ExpandableListView控制的基本使用

    在本文中,Demo为了展示Android在ExpandableListView用途管制.如该组/儿子ListView绑定数据源. 直接上代码例如以下: 程序结构图: layout文件夹下的 main. ...