javascript CSS畫圖之基礎(chǔ)篇
更新時(shí)間：2009年07月29日 02:30:21 作者：
要在瀏覽器上動(dòng)態(tài)地畫圖（矢量圖），個(gè)人覺得矢量圖中最關(guān)鍵的兩點(diǎn).
一、圖顯示的樣式，即圖形的顏色、透明度等；二、算法，即圖形的樣子，是簡(jiǎn)單的線、矩形、圓形、扇形、多邊形等，javascript和CSS無疑是最佳搭檔，所有的矢量圖形最基本的元素是1*1px的點(diǎn)，點(diǎn)可以成線、成面，成任意圖形。
一切矢量圖的根本____1*1px的點(diǎn)
如果對(duì)CSS有一定的了解，對(duì) clip:rect(top,right,bottom,left)熟悉的話，可以知道，代碼剪輯出一個(gè)區(qū)域，需要注意的是，clip:rect中的四個(gè)邊的位置是相對(duì)于對(duì)象的而不是相對(duì)于窗口的，另外在此position必須為absolute。
<div style="position:absolute;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>可以畫出一個(gè)紅色的點(diǎn)
算法能成圖的根本____在特定位置畫點(diǎn)
通過css的 left和top，在特定一個(gè)位置畫圖，將算法實(shí)現(xiàn)成可見圖形的根源可以解決，如下這段代碼可以在(100,100)的坐標(biāo)位置畫一個(gè)1*1px的紅點(diǎn)
<div style="position:absolute;left:100px;top:100px;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>
成為有生產(chǎn)力代碼的根本___抽象、精簡(jiǎn)
（如果只是上面一行代碼，著實(shí)沒有什么好研究的，相反如果把最根本的能很好的抽象出來，就大不一樣了），
上面的一行代碼其實(shí)可以抽象成，在特定坐標(biāo)點(diǎn)上(x，y),畫一個(gè)高度為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的點(diǎn)
如果對(duì)CSS有一定的了解，對(duì) clip:rect(top,right,bottom,left)熟悉的話，可以知道，代碼剪輯出一個(gè)區(qū)域，需要注意的是，clip:rect中的四個(gè)邊的位置是相對(duì)于對(duì)象的而不是相對(duì)于窗口的，另外在此position必須為absolute。
<div style="position:absolute;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>可以畫出一個(gè)紅色的點(diǎn)
算法能成圖的根本____在特定位置畫點(diǎn)
通過css的 left和top，在特定一個(gè)位置畫圖，將算法實(shí)現(xiàn)成可見圖形的根源可以解決，如下這段代碼可以在(100,100)的坐標(biāo)位置畫一個(gè)1*1px的紅點(diǎn)
<div style="position:absolute;left:100px;top:100px;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>
成為有生產(chǎn)力代碼的根本___抽象、精簡(jiǎn)
（如果只是上面一行代碼，著實(shí)沒有什么好研究的，相反如果把最根本的能很好的抽象出來，就大不一樣了），
上面的一行代碼其實(shí)可以抽象成，在特定坐標(biāo)點(diǎn)上(x，y),畫一個(gè)高度為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)文章
javascript中，new操作符的工作原理是什么?它是怎樣改變構(gòu)造函數(shù)的返回值和this指向的？下面這篇文章就來給大家介紹了關(guān)于Javascript中new()到底做了些什么的相關(guān)資料，需要的朋友可以參考下。2018-03-03
JavaScript實(shí)現(xiàn)快速排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)快速排序的方法,實(shí)例分析了javascript快速排序的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了Bootstrap?table列上下移動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
js基礎(chǔ)之DOM中元素對(duì)象的屬性方法詳解
下面小編就為大家?guī)硪黄猨s基礎(chǔ)之DOM中元素對(duì)象的屬性方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家介紹了瀏覽器緩存技術(shù)實(shí)現(xiàn)淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JavaScript該如何學(xué)習(xí) 怎樣輕松學(xué)習(xí)JavaScript
JavaScript該如何學(xué)習(xí)？如何輕松學(xué)習(xí)JavaScript？這篇文章主要介紹了輕松學(xué)習(xí)JavaScript的方法2017-06-06
前端時(shí)間因?yàn)轫?xiàng)目需要，要對(duì)一個(gè)產(chǎn)品下所有的附屬圖片進(jìn)行分頁(yè)顯示，沒考慮ajax一張張請(qǐng)求，所以干脆一次性全部把圖片out，然后在載入的時(shí)候進(jìn)行分頁(yè)，網(wǎng)上很多jquery,property等都實(shí)現(xiàn)了2009-12-12
手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash，接下來將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱憣?shí)現(xiàn)這兩個(gè)函數(shù)2022-03-03
這篇文章主要介紹了Javascript操作select控件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02