javascript CSS畫圖之基礎(chǔ)篇

2019-11-21 01:13:56

字體：大中小

供稿：網(wǎng)友

一、圖顯示的樣式，即圖形的顏色、透明度等；二、算法，即圖形的樣子，是簡(jiǎn)單的線、矩形、圓形、扇形、多邊形等，javascript和CSS無(wú)疑是最佳搭檔，所有的矢量圖形最基本的元素是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)
通過(guò)css的 left和top，在特定一個(gè)位置畫圖，將算法實(shí)現(xiàn)成可見(jià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í)沒(méi)有什么好研究的，相反如果把最根本的能很好的抽象出來(lái)，就大不一樣了），
上面的一行代碼其實(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>'; 
} 