首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
Web开发
> 详细
Html5用Canvas制作画图板
时间:
2015-04-29 14:56:00
阅读:
119
评论:
0
收藏:
0
[点我收藏+]
标签:
需求:
绘制多边形
可填充颜色
可设置文字
可移动,可删除
鼠标按住后,抬起之前线段应该尾随鼠标当前位置
可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形
思考:
第一想到的是找现成的改一改,找来找去,就认为fabricjs还能够,只是研究了一下,发现样例太少,非常难短时间内上手
想到了近期一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到非常快就上手了
结果:
一天半时间完毕,效果例如以下:
注意:
不要使用style或者css对canvas的width和height设置值,否则会引起坐标等被放大的问题
使用jquery获取canvas的时候要使用 “$(‘#canvas‘).get(0)”,否则则取不到对应的对象
调色板使用的是“spectrum.js”
取值赋值採用json模式,使用过的是“jquery.json-2.4.js”
採用json赋值的时候,由于我对图形进行了js封装类,且带有自己定义方法,所以在赋值的时候会出现不认自己定义方法的问题,原由于解析json的时候,对象会被解析为object而不是我定义的对象,所以须要人为处理一下
所有代码+HTML一共600行,这在曾经是我全然不敢想象的,HTML5会带给我们如何的未来呢?值得期待。
Html5用Canvas制作画图板
标签:
原文地址:http://www.cnblogs.com/hrhguanli/p/4465920.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
36.VUE — 认识 Webpack 和 安装
2021-07-28
【PHP】上传图片翻转问题
2021-07-28
php对数字进行万。亿的转化
2021-07-28
五个 .NET 性能小贴士
2021-07-28
Three.js中显示坐标轴、平面、球体、四方体
2021-07-28
.net 5+ 知新:【1】 .Net 5 基本概念和开发环境搭建
2021-07-27
1.html,css
2021-07-27
基于Docker搭建 Php-fpm + Nginx 环境
2021-07-27
nginx + http + svn
2021-07-27
kubernets kube-proxy的代理 iptables和ipvs
2021-07-26
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!