javascript CSS画图之基础篇


Posted in Javascript onJuly 29, 2009

一、图显示的样式,即图形的颜色、透明度等;二、算法,即图形的样子,是简单的线、矩形、圆形、扇形、多边形等,javascript和CSS无疑是最佳搭档,所有的矢量图形最基本的元素是1*1px的点,点可以成线、成面,成任意图形。
一切矢量图的根本____1*1px的点
如果对CSS有一定的了解,对 clip:rect(top,right,bottom,left)熟悉的话,可以知道,代码剪辑出一个区域,需要注意的是,clip:rect中的四个边的位置是相对于对象的而不是相对于窗口的,另外在此position必须为absolute。
<div style="position:absolute;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>可以画出一个红色的点
算法能成图的根本____在特定位置画点
通过css的 left和top,在特定一个位置画图,将算法实现成可见图形的根源可以解决,如下这段代码可以在(100,100)的坐标位置画一个1*1px的红点
<div style="position:absolute;left:100px;top:100px;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>
成为有生产力代码的根本___抽象、精简
(如果只是上面一行代码,着实没有什么好研究的,相反如果把最根本的能很好的抽象出来,就大不一样了),
上面的一行代码其实可以抽象成,在特定坐标点上(x,y),画一个高度为h,宽度为w的区域,并且画笔的颜色为color,为了更方便利用,可以精炼成如下方法:

function _mkDiv(x, y, w, h,color) 
{ 
'<div style="position:absolute;'+ 
'left:' + x + 'px;'+ 
'top:' + y + 'px;'+ 
'width:' + w + 'px;'+ 
'height:' + h + 'px;'+ 
'clip:rect(0,'+w+'px,'+h+'px,0);'+ 
'background-color:' + color + 
';"><\/div>'; 
}
Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JavaScript 原型继承
Dec 26 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 #Javascript
JavaScript 设计模式学习 Factory
Jul 29 #Javascript
JQuery UI皮肤定制
Jul 27 #Javascript
JavaScript 设计模式学习 Singleton
Jul 27 #Javascript
xml 封装与解析(javascript和C#中)
Jul 26 #Javascript
JavaScript 捕获窗口关闭事件
Jul 26 #Javascript
jquery tools之tooltip
Jul 25 #Javascript
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
总经理岗位职责范本
2014/02/02 职场文书
店面销售职位的职责
2014/03/09 职场文书
面试必备的求职信
2014/05/25 职场文书
2014年公务员工作总结
2014/11/18 职场文书
网络营销计划书
2015/01/17 职场文书