javascript CSS畫圖之基礎(chǔ)篇
更新時間：2009年07月29日 02:30:21 作者：
要在瀏覽器上動態(tài)地畫圖（矢量圖），個人覺得矢量圖中最關(guān)鍵的兩點.
一、圖顯示的樣式，即圖形的顏色、透明度等；二、算法，即圖形的樣子，是簡單的線、矩形、圓形、扇形、多邊形等，javascript和CSS無疑是最佳搭檔，所有的矢量圖形最基本的元素是1*1px的點，點可以成線、成面，成任意圖形。
一切矢量圖的根本____1*1px的點
如果對CSS有一定的了解，對 clip:rect(top,right,bottom,left)熟悉的話，可以知道，代碼剪輯出一個區(qū)域，需要注意的是，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，在特定一個位置畫圖，將算法實現(xiàn)成可見圖形的根源可以解決，如下這段代碼可以在(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>
成為有生產(chǎn)力代碼的根本___抽象、精簡
（如果只是上面一行代碼，著實沒有什么好研究的，相反如果把最根本的能很好的抽象出來，就大不一樣了），
上面的一行代碼其實可以抽象成，在特定坐標點上(x，y),畫一個高度為h,寬度為w的區(qū)域，并且畫筆的顏色為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)熟悉的話，可以知道，代碼剪輯出一個區(qū)域，需要注意的是，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，在特定一個位置畫圖，將算法實現(xiàn)成可見圖形的根源可以解決，如下這段代碼可以在(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>
成為有生產(chǎn)力代碼的根本___抽象、精簡
（如果只是上面一行代碼，著實沒有什么好研究的，相反如果把最根本的能很好的抽象出來，就大不一樣了），
上面的一行代碼其實可以抽象成，在特定坐標點上(x，y),畫一個高度為h,寬度為w的區(qū)域，并且畫筆的顏色為color，為了更方便利用，可以精煉成如下方法：
復(fù)制代碼 代碼如下:
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>';
}
相關(guān)文章
微信小程序 JS動態(tài)修改樣式的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序JS動態(tài)修改樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了javascript中關(guān)于去重操作的，在JS中關(guān)于數(shù)據(jù)去重操作的使用是非常常用，也是非常重要的點，一般情況下關(guān)于對數(shù)組去重點操作是最常用的，下文我們就來介紹js去重相關(guān)內(nèi)容,需要的朋友可以參考下2022-04-04
JavaScript?canvas?實現(xiàn)用代碼畫畫
這篇文章主要為大家介紹了JavaScript?canvas?實現(xiàn)用代碼畫畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家詳細介紹了zTree樹形插件異步加載的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了關(guān)于redux-saga中take使用方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
下面小編就為大家?guī)硪黄鷍s獲取left值和top值的三種方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文介紹了如何快速定位SQL性能問題的方法,包括找出執(zhí)行時間最長的SQL、同類型并發(fā)SQL、阻塞和被阻塞SQL、鎖等待和死鎖,以及慢日志分析,需要的的朋友一起看看吧2017-04-04
閉包常常被譽為JavaScript中最難理解的概念之一，這篇文章就來帶大家深入了解一下JavaScript中閉包的概念、實現(xiàn)與應(yīng)用，需要的可以參考一下2023-04-04
Map是一組鍵值對的結(jié)構(gòu),具有極快的查找速度,下面這篇文章主要給大家介紹了關(guān)于JS利用map整合雙數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
uniapp官方雖然提供了uni-data-checkbox,含括了單選和多選框功能,但是它功能是在不能滿足需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中單選按鈕的實現(xiàn)代碼,需要的朋友可以參考下2023-01-01