需求:
  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. 京东商城招聘scala 高级开发工程师 T3级别

    岗位级别:T3 岗位职责: 1.参与自动调价.匹配系统的设计和实现 岗位要求: 1. 一年以上scala开发经验2.良好的函数式编程能力3. JAVA基础扎实4.熟悉大数据处理,有hadoop/hba ...

  2. Objective-c 中的算术函数和常数的表示

    常数 常数名 说明 M_PI 圆周率(=π) M_PI_2 圆周率的1/2(=π/2) M_PI_4 圆周率的1/4(=π/4) M_1_PI =1/π M_2_PI =2/π M_E =e M_LO ...

  3. V5

    系统设置--关于手机--版本号点5下--进去开发模式--打开开发选项--打开USB调试.然后在连接第三方助手软件 http://bbs.ztehn.com/thread-19037-1-1.html

  4. c++进阶

    对网络编程/多线程/系统编程有一定了解:4:对ngnix,redis,memcache有一定了解:5:有高并发服务开发经验优先: 因为C/C++在嵌入式.移动互联网.物联网有很大的优势,有很多人就靠一 ...

  5. CSS计数器妙用

    做web的经常会遇到类似排行榜的需求, 特别是要求前n名的样式和后面人不一样. 通常大多数人对于这个需求的做法都是在后端处理好排名名次, 在前端填入内容, 然后针对前n名做特殊的样式处理. 但是这样有 ...

  6. java 解析 json 遍历未知key

    1.—————————————————————————————————————————————————————————————— import net.sf.json.JSONObject; Stri ...

  7. uva11922(强行用rope替代spaly)

    spaly没学过,用rope水过, rope是extension库中的东西,codeblocks编译器支持, 需要包含 #include <ext/rope>using namespace ...

  8. Hyper-V笔记

    Hyper-V的网络架设 Hyper-V中创建“虚拟网络”(可看成交换机)会在物理机中创建相应的虚拟网卡.Hyper-V安装好后会默认创建一个“本地连接-虚拟网络”对应的虚拟网卡给物理机使用,原本的本 ...

  9. dij算法为什么不能处理负权,以及dij算法变种

    对于上面那张图,是可以用dij算法求解出正确答案,但那只是巧合而已. 我们再看看下面这张图. dist[4] 是不会被正确计算的. 因为dij算法认为从队列出来的点,(假设为u)肯定是已经求出最短路的 ...

  10. C# 如何获取某用户的“我的文档”的目录

    Console.WriteLine(System.Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments)); System.E ...