吧唧下工作的事情 - 记用canvas封装的小小控件

☺啊哈~我想大家一定对canvas不陌生吧

我最喜欢的HTML5的特性就是他了

可能是工作原因~对他完全很偏爱(*^__^*) 嘻嘻…… 

简单易用  他的功能可比你想象的要强大得多哦

我把他看做是2D图形环境

我们可以通过API来操作他   创建一些图形也可以是动画的哦

希望有一天我可以用他来创建绚丽的图形和游戏  阿弥陀佛\(^o^)/~

万丈高楼平地起  ( ⊙ o ⊙ )！这是我爸爸最喜欢说的一句话了

基础是很重要的~所以我的梦想要慢慢来实现哈

这是我用canvas封装的几个控件 很基础哦~别拍砖哈

节点图 ps 设计图

 ps

叭叭不足之处吧  是不是感觉设计图很亮眼  那我画的那个朦朦胧胧的  差强人意啊

设计图用了很多高光的效果 径向渐变 圆形渐变  

苦恼高光效果不是很容易实现   唯一想到的办法是补亮线

径向渐变只要取颜色  一般都不难实现

圆形渐变也很恶心 如果是重叠在一起的圆就会很好实现

canvas绘制文本没有深入研究  只知道如何描边还有填充~貌似使用canvas绘制文本不是很好的方法  除非有充足的理由~否则一定不要再canvas中创建文本

因为canvas的文本是以图像绘制的~这意味着它无法像HTML文档中的普通文字一样用鼠标指针获取  他实际上不是文本只是像文本而已

 

哇唔哇唔    写代码真是一个耐心十足的活啊~好几次我都想砸鼠标了

看看身边的同学~每个人都无不抱怨自己的工作  或无聊 或忙的要死或简直就是垃圾等等  好像还没听到谁说自己工作很满意的好孩子

55555555~生活不易  更不想做个闲人  还是咬咬嘴唇 慢慢来吧

 

进度条ps设计图

ps

这个进度条我算是花了很多心思~可效果也不是很完美

之前白色的底是想用图片来进行代替 但是却碰到一个问题  就是图片必须加载完成之后才可以传递到2D图形环境中

var image = new Image();

image.src ="pp/jpg";

$(image).load(function()){

　　context.drawImage(image,0,0)

}

进度条是动态的~也就是说每变一次canvas就需要重画一次 那么图像就要重新加载一次 结果就有可能造成闪图的想象

后来我就索性用绘制了白色的底  有渐变的效果

 

饼图ps效果图

 ps 

封装成控件这个图设计的有问题哈~3个色块的轮廓高光效果不一样

这叫我怎么做嘛~所以我就索性都给描了边 咕~~(╯﹏╰)b毛发儿的感觉

不得不说的是这个饼图我是二次封装  基本库是RGraph的饼图

用别人的东西终究是要吃苦头的

因为之前我做了个曲线图  基本库是RGraph的曲线图  二次封装时给曲线加了click事件 

当曲线图跟饼图放在同一个页面时~点击曲线的click事件饼图曲线没了   好生奇怪啊~~~~(>_<)~~~~

后来找了好久才找到原因  因为RGraph.有一个基础库叫RGraph.common.core.js  他把所有的创建的对象存在RGraph对象中

在曲线的点击事件中我调用了RGraph.ObjectRegistry.Clear()方法~所以RGraph创建的对象都没了

 

曲线图

我就不放设计图了~曲线图注重功能 没有什么特别的设计

这个就是我前面说的2次封装的曲线图  基础库是RGraph的基础库

既然是2次封装也没什么好说的哈~

可能是我自己能力有限或者还不够有耐心 绘制的图形不是十分的满意  但我还是有那么一点点的喜悦感

啊哈~我相信会越来越好的哈

ps:这是我第一次写博客  不是很专业   忘见谅(>^ω^<)