12行javascript代碼繪制一個八卦圖
更新時間：2015年04月02日 11:29:08 投稿：hebedich
本文給大家分享的是使用有限的代碼繪制八卦圖，算是考核下自己對于javascript的理解，這里推薦給大家，有需要的小伙伴參考下。
一句話說明：用有限的代碼構(gòu)建一個1024*1024的顏色矩陣，秀出你的編程&藝術(shù)之美
起源于 stackexchange 上的一個問題， 這里稍微做了一下擴(kuò)展，支持更多編程語言，并放寬了代碼長度的限制。
規(guī)則
目標(biāo)：
通過實現(xiàn) 模版 中的一個函數(shù) get_color_at(x, y) ，在一個 1024*1024 的畫布上畫出盡可能 “有意思” 的圖案。
參數(shù)：
int x, int y ，取值均為 0 - 1023，對應(yīng)畫布上坐標(biāo)點，左上角為起始點 (0,0)
返回：
int r, int g, int b, int alpha， 對應(yīng)顏色的 RGBA 分量，均為 0 - 255。
注意：
各語言中 alpha 分量定義可能不同，由 模版 統(tǒng)一轉(zhuǎn)換為： 0 - 255，值越大越透明。
要求：
只能編輯 模版 中 get_color_at(x, y) 函數(shù)體內(nèi) // {{code start}} - // {{code end}} 間的代碼；
代碼總字符數(shù)不能超過 1024 個，且有較好的可讀性。
if(typeof f_c=="undefined"){
f_c=function(x,y,px,py,r){
return Math.sqrt(Math.pow(x-px,2)+Math.pow(y-py,2))<=r;
};
}
var x0=x-512,y0=y-512;
r=g=b=128;
if(f_c(x0,y0,0,0,512)) r=g=b=(x0>0)?255:0;
if(f_c(x0,y0,0,256,256)&&x0<=0) r=g=b=255;
if(f_c(x0,y0,0,-256,256)&&x0>0) r=g=b=0;
if(f_c(x0,y0,0,256,64)) r=g=b=0;
if(f_c(x0,y0,0,-256,64)) r=g=b=255;
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
JavaScript簡單遍歷DOM對象所有屬性的實現(xiàn)方法
這篇文章主要介紹了JavaScript簡單遍歷DOM對象所有屬性的實現(xiàn)方法,涉及JavaScript針對頁面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)禁止分享代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了JS實現(xiàn)簡單的抽獎轉(zhuǎn)盤效果,涉及javascript數(shù)值計算與頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了微信小程序中的生命周期與生命周期函數(shù)的介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了JS和Nodejs中的事件驅(qū)動，對事件驅(qū)動感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了JS獲取圖片高度寬度的方法，開始的時候沒能做到兼容chrome，在度娘和眾網(wǎng)友的幫助下，最終完成了完美兼容，這里分享給大家，有需要的小伙伴可以參考下。2015-04-04
uniapp中使用?uni.navigateBack()?返回上級頁面并傳參的方法
最近遇到這樣的需求在A頁面中通過跳轉(zhuǎn)到B頁面,在B頁面中處理的數(shù)據(jù),需要跳轉(zhuǎn)回A頁面供其使用,本文給大家分享uniapp中使用?uni.navigateBack()?返回上級頁面并傳參的操作方法,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了JSON無限折疊菜單編寫實例，有需要的朋友可以參考一下2013-12-12
javascript文本框內(nèi)輸入文字倒計數(shù)的方法
這篇文章主要介紹了javascript文本框內(nèi)輸入文字倒計數(shù)的方法,涉及javascript針對鍵盤事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
在項目中需要快速檢測瀏覽器是否支持某CSS3特性，比如檢測是否支持“transform”，然后我的布局會有兩種完全不同的版式2012-09-09