繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript CSS画图之基础篇
- Javascript
- 一个js写的日历（代码部分网摘）
- IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
- jquery 子窗口操作父窗口的代码
- 用JavaScript隐藏控件的方法
- js 冒泡事件与事件监听使用分析
- ie与ff下的event事件
- 比较全面的event对像在IE与FF中的区别 推荐
- js 获取中文拼音,Select自动匹配字母获取值的代码
- JavaScript 变量命名规则
- 没有form表单情况下敲回车键提交表单的js代码
- jQuery 使用手册(四)
- jQuery 使用手册(六)
- jQuery 使用手册(七)
- Javascript 数组添加一个 indexOf 方法的实现代码
- Javascript 数组添加 shuffle 方法的实现代码
- Javascript 两个窗体之间传值实现代码
- Javascript showModalDialog两个窗体之间传值
- js 覆盖和重载 函数
- JavaScript中Object和Function的关系小结
- javascript parseInt 大改造
Javascript 中的 javascript CSS画图之基础篇
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 430 ::
收藏到网摘: 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
