繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript CSS画图之基础篇
- Javascript
- 推荐:极酷右键菜单
- 跟随鼠标旋转的文字
- 拖动层效果，兼容IE和FF!
- 由 element.appendChild(newNode) ,谈开去
- 发个自己写的表格操作类(添加，删除，排序，上移，下移)
- 小议Function.apply() 之一------(函数的劫持与对象的复制)
- 小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
- JavaScript中令你抓狂的魔术变量
- [原创]网络复制内容时常用的正则+editplus
- createElement和onclick
- 很有趣的一段textarea
- 用 JavaScript 给站外链接的 cursor 进行改造
- 一段好玩的JavaScript代码
- IE中实现全屏广告代码，霸道无比.
- phpwind放自动注册方法
- 线路分流自动跳转代码；希望对大家有用！
- 鼠标放在放在输入框上面提示效果
- 常用js脚本
- 硬盘浏览程序，保存成网页格式便可使用
- Js的MessageBox
Javascript 中的 javascript CSS画图之基础篇
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 354 ::
收藏到网摘: 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
