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

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

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

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

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

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

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

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

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

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

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

节点图 ps 设计图

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

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

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

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

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

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

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

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

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

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

进度条ps设计图

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

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

var image = new Image();

image.src ="pp/jpg";

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

　　context.drawImage(image,0,0)

}

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

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

饼图ps效果图

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

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

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

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

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

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

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

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

曲线图

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

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

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

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

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

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

转载于:https://www.cnblogs.com/ppgirl/archive/2013/05/20/3089086.html

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

记录下帮助一位网友解决的关于android子控件的onTouch或onClick和父OnTouch 冲突的问题。
记录下帮助一位网友解决的关于android子控件的onTouch或onClick和父OnTouch 冲突的问题. 参考文章: (1)记录下帮助一位网友解决的关于android子控件的onTouch或o ...
【Android归纳】基于XListView的下拉刷新、上拉加载更多的控件分析
目录前言功能介绍总体设计组成类关系图详细设计 XlistViewHeader原理分析 XListViewFooter原理分析 XListView原理分析代码带注释下载目录前言如果你 ...
QML工作笔记-界面登录框设置（方便其他控件居中）
目录效果及演示伪代码效果及演示这个功能十分有用,并且常用,在此记录下! 如下效果: 下面的图我不再截全了.这个框只是方便开发者看,现在把框去掉! 如果不想让其透明,可以转换为这样的效果: 很丑 ...
记一次Android第三方日历控件CalendarView的使用
一.文章背景用过两个日历控件的库,有用viewpager实现的,也有用canvas实现的.在实际使用过程中,发现使用canvas实现的calendarView切换下一月和下一年这种操作时切换更流畅. ...
Windows环境下使用Python设计应用软件——【2】pyqt给控件添加功能（弹窗功能）
PS:本文主要用于自我整理总结,方便后续参考,如果恰好帮助到你,也是件值得高兴的事之前我们简单设计了界面,现在是给控件加我们想要的功能的时候了. 首先我么要知道这个控件名是什么然后是设置单击控件后 ...
解决问题：win10下VS2013报错：此电脑没有安装ActiveX控件
现象:之前在win7下建的工程,写的程序.程序中用到ActiveX控件--串口mscomm. 电脑换成win10系统以后,再次打开工程,报错:此电脑没有安装ActiveX控件. 解决办法: 1.下载m ...
入门级： WinForm 下的 ComboBox,ListBox 的使用（三）选择控件
平常我们经常会用到这样的控件:选中一个ListBox 中的项移动到另外一个 ListBox 中,反过来也行.像下面这样: 我们需要将上面两个涂黑的地方 (Label),以及两个 ListBox,四个操 ...
人工智能对话系统在VUI和GUI结合下对于控件调用的调研报告
一.什么是控件百度百科:控件是指对数据和方法的封装.控件可以有自己的属性和方法,其中属性是控件数据的简单访问者,方法则是控件的一些简单而可见的功能.控件创建过程包括设计.开发.调试(就是所谓的3Ds ...
具有TreeView下拉控件的ComboBox
具有TreeView下拉控件的ComboBox 没错,如标题所说的那样,在下拉框中是一个TreeView,但是,为什么我们需要这样的控件?事实上这样的需求我已经遇到很多次了,比如适用于:  当遇到层 ...
鸡啄米vc++2010系列32（标签控件Tab Control 下）
上一节中鸡啄米讲了标签控件知识的上半部分,本节继续讲下半部分. 标签控件的创建 MFC为标签控件的操作提供了CTabCtrl类. 与之前的控件类似,创建标签控件可以在对话框模板中直接拖入Tab Con ...

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

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

最新文章

热门文章