博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html5用Canvas制作画图板
阅读量:5994 次
发布时间:2019-06-20

本文共 570 字,大约阅读时间需要 1 分钟。

需求:
  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会带给我们如何的未来呢?值得期待。
你可能感兴趣的文章
iOS 从相机或相册获取图片并裁剪
查看>>
ansilbe 入门001、ansible的介绍
查看>>
C++14介绍
查看>>
iOS-- 快速集成iOS基于RTMP的视频推流
查看>>
BZOJ1497: [NOI2006]最大获利[最小割 最大闭合子图]
查看>>
使用Ecplise git commit时出现"There are no stages files"
查看>>
Linux中变量#,#,@,0,0,1,2,2,*,$$,$?的含义
查看>>
C语言 · 核桃的数量
查看>>
第一百五十六节,封装库--JavaScript,延迟加载
查看>>
ssh: connect to host github.com port 22: Connection timed out
查看>>
Win10怎么设置点击任务栏上文件夹图标直接打开“我的电脑”?
查看>>
吃透css3之3d属性--perspective和transform
查看>>
VB的程序如何破解
查看>>
weblogic学习笔记:域创建+应用部署
查看>>
CentOS6.5下Ambari安装搭建部署大数据集群(图文分五大步详解)(博主强烈推荐)...
查看>>
Vmware 设置NAT模式
查看>>
mvel2.0语法指南
查看>>
什么是pear的channel?
查看>>
javascript数据结构与算法---二叉树(查找最小值、最大值、给定值)
查看>>
idea 高级调试技巧
查看>>