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)文章
微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序JS動(dòng)態(tài)修改樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了javascript中關(guān)于去重操作的，在JS中關(guān)于數(shù)據(jù)去重操作的使用是非常常用，也是非常重要的點(diǎn)，一般情況下關(guān)于對(duì)數(shù)組去重點(diǎn)操作是最常用的，下文我們就來介紹js去重相關(guān)內(nèi)容,需要的朋友可以參考下2022-04-04
JavaScript?canvas?實(shí)現(xiàn)用代碼畫畫
這篇文章主要為大家介紹了JavaScript?canvas?實(shí)現(xiàn)用代碼畫畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了zTree樹形插件異步加載的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了關(guān)于redux-saga中take使用方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
下面小編就為大家?guī)硪黄鷍s獲取left值和top值的三種方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本文介紹了如何快速定位SQL性能問題的方法,包括找出執(zhí)行時(shí)間最長(zhǎng)的SQL、同類型并發(fā)SQL、阻塞和被阻塞SQL、鎖等待和死鎖,以及慢日志分析,需要的的朋友一起看看吧2017-04-04
閉包常常被譽(yù)為JavaScript中最難理解的概念之一，這篇文章就來帶大家深入了解一下JavaScript中閉包的概念、實(shí)現(xiàn)與應(yīng)用，需要的可以參考一下2023-04-04
Map是一組鍵值對(duì)的結(jié)構(gòu),具有極快的查找速度,下面這篇文章主要給大家介紹了關(guān)于JS利用map整合雙數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
uniapp官方雖然提供了uni-data-checkbox,含括了單選和多選框功能,但是它功能是在不能滿足需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中單選按鈕的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-01-01