繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript CSS画图之基础篇
- Javascript
- 实现表格中行点击时的渐扩效果！
- 多图展示滑动过渡效果
- 弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。
- 拖动Html元素集合 Drag and Drop any item
- 脚本吧 - 幻宇工作室用到js,超强推荐base.js
- 使用透明叠加法美化文件上传界面
- JavaScript高级程序设计
- 对象的类型：本地对象(1)
- 如何实现表格中行点击时的渐扩效果！
- 使用button标签，实现三态图片按钮
- 根据分辩率调用不同的CSS.
- Web版彷 Visual Studio 2003 颜色选择器
- JS中简单的实现像C#中using功能（有源码下载）
- js之WEB开发调试利器:Firebug 下载
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- jQuery 1.0.4 - New Wave Javascript(js源文件)
- 强悍无比的WEB开发好助手FireBug(Firefox Plugin)
- 换肤测试程序js脚本
- xWin之JS版(2-26更新)
- 共享自己写一个框架DreamScript
Javascript 中的 javascript CSS画图之基础篇
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 464 ::
收藏到网摘: n/a
要在浏览器上动态地画图（矢量图），个人觉得矢量图中最关键的两点. 一、图显示的样式，即图形的颜色、透明度等；二、算法，即图形的样子，是简单的线、矩形、圆形、扇形、多边形等，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>';
}
评论 (0) All
