javascript CSS画图之基础篇
更新时间：2009年07月29日 02:30:21 作者：
要在浏览器上动态地画图（矢量图），个人觉得矢量图中最关键的两点.
一、图显示的样式，即图形的颜色、透明度等；二、算法，即图形的样子，是简单的线、矩形、圆形、扇形、多边形等，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>';
}
一切矢量图的根本____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动态修改样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了javascript中关于去重操作的，在JS中关于数据去重操作的使用是非常常用，也是非常重要的点，一般情况下关于对数组去重点操作是最常用的，下文我们就来介绍js去重相关内容,需要的朋友可以参考下2022-04-04
这篇文章主要为大家介绍了JavaScript canvas 实现用代码画画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了zTree树形插件异步加载的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本篇文章主要介绍了关于redux-saga中take使用方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
下面小编就为大家带来一篇原生js获取left值和top值的三种方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文介绍了如何快速定位SQL性能问题的方法,包括找出执行时间最长的SQL、同类型并发SQL、阻塞和被阻塞SQL、锁等待和死锁,以及慢日志分析,需要的的朋友一起看看吧2017-04-04
闭包常常被誉为JavaScript中最难理解的概念之一，这篇文章就来带大家深入了解一下JavaScript中闭包的概念、实现与应用，需要的可以参考一下2023-04-04
Map是一组键值对的结构,具有极快的查找速度,下面这篇文章主要给大家介绍了关于JS利用map整合双数组的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能,但是它功能是在不能满足需求,下面这篇文章主要给大家介绍了关于uniapp中单选按钮的实现代码,需要的朋友可以参考下2023-01-01
最新评论