當前位置：首頁 > 網絡編程 > JavaScript > 詳細頁面

JS繪制生成花瓣效果的方法【轉】

時間：2020-03-04來源：電腦系統城作者：電腦系統城

本文實例講述了JS繪制生成花瓣效果的方法。分享給大家供大家參考。具體如下：

這里使用JS繪制生成花瓣效果，純JS生成的圖形繪制效果，想研究一下JavaScript圖形繪畫方面知識的，不妨參考一下這個小程序，我覺得還是挺不錯的。

運行效果如下圖所示：

具體代碼如下：

<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>

相關信息

2020-11-11
Vue3 響應式偵聽與計算的實現
2020-10-19
詳解mybatis-plus配置找不到Mapper接口路徑的坑
2020-10-19
SpringBoot下使用MyBatis-Puls代碼生成器的方法

springboot+mybatis-plus 兩種方式打印sql語句的方法
springboot+mybatis-plus 兩種方式打印sql語句的方法...

2020-10-19
IDEA中項目集成git提交代碼的詳細步驟
IDEA中項目集成git提交代碼的詳細步驟...

2020-10-19

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放