一、图显示的样式，即图形的颜色、透明度等；二、算法，即图形的样子，是简单的线、矩形、圆形、扇形、多边形等，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>'; }

　　推荐阅读

　　JS input 数字验证代码

/* **@控制控件只能输入数字,含-(负号).(小数点) **@Inline HTML: <ELEMENT ... onkeypress="javascript:onlyNumber()" style="ime-mode:disabled"> For Input **@Event property: object.attachEvent("onkeypress>>>详细阅读

本文标题：javascript CSS画图之基础篇

地址：http://www.17bianji.com/kaifa2/JS/28358.html

 1/2    1