繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript CSS画图之基础篇
- Javascript
- 实用的JS表单验证提示效果
- CSS 直方图布局示例
- jquery 动态调整textarea高度
- jquery animate 动画效果使用说明
- jquery checkbox全选反选效果代码
- jquery (show,fadeOut,Animate)简单效果
- JavaScript 抽奖效果实现代码 数字跳动版
- javascript Math.random()随机数函数
- jQuery 加上最后自己的验证
- JavaScript 自动分号插入（JavaScript synat:auto semicolon insertion）
- 兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
- javascript 打印内容方法小结
- jQuery toggle()设置CSS样式
- javaScript parseInt字符转化为数字函数使用小结
- 模仿JQuery sortable效果 代码有错但值得看看
- javascript 常见的闭包问题的解决办法
- 在js中单选框和复选框获取值的方式
- 按键盘方向键翻页跳转的javascript代码(支持ie,firefox)
- js 操作table之 移动TR位置 兼容FF 跟 IE
- csdn 论坛技术区平均给分功能
Javascript 中的 javascript CSS画图之基础篇
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 199 ::
收藏到网摘: 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
