JS繪制生成花瓣效果的方法
更新時間：2015年08月05日 16:18:24 作者：皮蛋
這篇文章主要介紹了JS繪制生成花瓣效果的方法,涉及javascript數(shù)學(xué)運(yùn)算及頁面元素操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS繪制生成花瓣效果的方法。分享給大家供大家參考。具體如下：
這里使用JS繪制生成花瓣效果，純JS生成的圖形繪制效果，想研究一下JavaScript圖形繪畫方面知識的，不妨參考一下這個小程序，我覺得還是挺不錯的。
運(yùn)行效果如下圖所示：
具體代碼如下：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js繪制生成花瓣效果</title>
</head>
<body>
<script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+300)+"; top: "+(y+200)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<script>
for(t=1;t<=360;t++){
lo=200 * Math.sin(2 * (Math.PI / 180) * t);
x = lo * Math.cos((Math.PI / 180) * t);
y = lo * Math.sin((Math.PI / 180) * t);
a(x,y,"#000000");
lo=200 * Math.cos(2 * (Math.PI / 180) * t);
x = lo * Math.cos((Math.PI / 180) * t);
y = lo * Math.sin((Math.PI / 180) * t);
a(x,y,"#ff0000");
}
</script>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
響應(yīng)式框架Bootstrap柵格系統(tǒng)的實例
下面小編就為大家分享一篇響應(yīng)式框架Bootstrap柵格系統(tǒng)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript代碼實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
js構(gòu)造函數(shù)創(chuàng)建對象是否加new問題
本篇文章主要給大家詳細(xì)分析了js構(gòu)造函數(shù)創(chuàng)建對象加new與不加new的問題，有這方面興趣的參考學(xué)習(xí)下。2018-01-01
這篇文章主要為大家詳細(xì)介紹了swiper4實現(xiàn)移動端導(dǎo)航切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
11種JavaScript前端數(shù)據(jù)去重方式總結(jié)
這篇文章主要為大家總結(jié)了JavaScript去重的11種方式，各有優(yōu)缺點(diǎn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價值，需要的可以根據(jù)需求合理使用2023-06-06
這篇文章主要介紹了微信小程序開發(fā)的基本流程步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
JavaScript避免代碼的重復(fù)執(zhí)行經(jīng)驗技巧分享
經(jīng)常會發(fā)現(xiàn)一個問題，那就是重復(fù)的代碼執(zhí)行，下面就是一些在查看它們的源代碼時發(fā)現(xiàn)一些問題，把這些分享給大家，希望能讓你們更加簡潔高效的寫出JavaScript代碼2014-04-04
本篇文章主要介紹了webpack開發(fā)跨域問題解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文通過實例代碼給大家講解了js和jquery中的文檔加載問題，感興趣的的朋友一起看看吧2017-08-08微信小程序開發(fā)（三）：返回上一級頁面并刷新操作示例【頁面?！?/a>
這篇文章主要介紹了微信小程序開發(fā)返回上一級頁面并刷新操作,結(jié)合實例形式詳細(xì)分析了微信小程序返回上一級頁面并刷新操作方法技巧與相關(guān)注意事項,需要的朋友可以參考下2020-06-06