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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
JAVASCRIPT对象及属性
Feb 13 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
浅谈express 中间件机制及实现原理
Aug 31 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
php实现微信支付之企业付款
2018/05/30 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
canvas实现钟表效果
2017/02/13 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python中%r和%s的详解及区别
2017/03/16 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python编写打字训练小程序
2019/09/26 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Tensorflow 实现释放内存
2020/02/03 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
美国手机支架公司:PopSockets
2019/11/27 全球购物
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
公开承诺书格式
2014/05/21 职场文书
师范生自荐信模板
2014/05/28 职场文书
主题党日活动总结
2014/07/08 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
平安建设汇报材料
2014/12/29 职场文书
继承权公证书范本
2015/01/23 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
简历自荐信范文
2015/03/09 职场文书
微信搭讪开场白
2015/05/28 职场文书
运动会宣传稿100字
2015/07/23 职场文书
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers