動(dòng)態(tài)正17邊光闌Canvas代碼，借此向十九世紀(jì)偉大數(shù)學(xué)家高斯致敬-創(chuàng)新互聯(lián)

公元前三世紀(jì)，歐幾里得在《幾何原本》中記載了正方形，正五邊形，正六邊形的做法，后來(lái)人們也掌握了正十五邊形作圖，但之后兩千多年，人們沒(méi)有在更高階邊形上取得突破。

創(chuàng)新互聯(lián)建站10多年成都企業(yè)網(wǎng)站定制服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站定制及推廣,對(duì)成都戶外休閑椅等多個(gè)方面擁有多年的網(wǎng)站維護(hù)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

1796年，19歲的高斯證明了正17邊形可以由尺規(guī)作圖作出，但沒(méi)有給出具體做法；

1825年Johanes Erchinger發(fā)表了第一個(gè)正十七邊形尺規(guī)作圖法；

1898年，高斯的孫子發(fā)現(xiàn)了高斯在1796年3月30日關(guān)于正17邊形作圖的手稿，可以推斷，高斯至少在當(dāng)時(shí)在草稿紙上完成了作圖分析過(guò)程。

我用canvas制作了正十七邊形光闌，借此向偉大數(shù)學(xué)家高斯致敬。
光闌的效果圖如下：
動(dòng)態(tài)正17邊光闌Canvas代碼，借此向十九世紀(jì)偉大數(shù)學(xué)家高斯致敬
動(dòng)態(tài)正17邊光闌Canvas代碼，借此向十九世紀(jì)偉大數(shù)學(xué)家高斯致敬
動(dòng)態(tài)正17邊光闌Canvas代碼，借此向十九世紀(jì)偉大數(shù)學(xué)家高斯致敬
動(dòng)態(tài)正17邊光闌Canvas代碼，借此向十九世紀(jì)偉大數(shù)學(xué)家高斯致敬
動(dòng)態(tài)正17邊光闌Canvas代碼，借此向十九世紀(jì)偉大數(shù)學(xué)家高斯致敬

代碼沒(méi)有經(jīng)過(guò)大改變，只是在 http://www.cnblogs.com/xiandedanteng/p/8735444.html 的基礎(chǔ)上把a(bǔ)ngleCount改成了17，另外優(yōu)化了getColor函數(shù)。

效果見下面五個(gè)圖形，想看動(dòng)畫效果請(qǐng)自行下載代碼然后用chrome瀏覽器打開。或者從 https://files.cnblogs.com/files/xiandedanteng/17%E5%85%89%E9%98%91.rar 下載錄像觀看。

代碼下載地址：https://files.cnblogs.com/files/xiandedanteng/20180408_17guanglan.rar

Canvas代碼是這樣的：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>17角光闌 2018年4月8日 向高斯致敬</title>
</head>

 <body onload="draw()">
    <canvas id="myCanvus" width="400px" height="400px" >
        出現(xiàn)文字表示你的瀏覽器不支持HTML5
    </canvas>
 </body>

</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById('myCanvus');
canvas.width=400;
canvas.height=400;

context=canvas.getContext('2d');    
context.translate(200,200);

slot=new Slot();
animate();

};

var delta=0; // 旋轉(zhuǎn)角
var radius=0; // 旋轉(zhuǎn)半徑
var outerRad=200;// 外徑
var context; // 繪畫上下文
var slot; // 光闌對(duì)象
var angleCount=17;// 三角光闌為3，四角光闌為4，六角光闌為6

function animate(){
context.clearRect(-200,-200,400,400);// 清屏

slot.update(radius,delta,outerRad);
slot.paintBg(context);
slot.paint(context);
slot.paintBase(context);

delta+=0.5;
radius+=1;

if(radius<outerRad*0.9){        
   window.requestAnimationFrame(animate);// 讓瀏覽器自行決定幀速率
}

}

function Slot(){
var obj=new Object;

obj.ax=0;
obj.ay=0;
obj.bx=0;
obj.by=0;
obj.cx=0;
obj.cy=0;
obj.angleA=0;
obj.angleB=0;
obj.angleC=0;
obj.radius=0;
obj.outerRad=0;
obj.img=new Image();
obj.img.src="earth.jpg";    

// 計(jì)算
obj.update=function(radius,theta,outerRad){
    this.radius=radius;
    this.outerRad=outerRad;        

    var alpha=Math.acos(radius/outerRad);
    this.angleA=getRad(theta)+alpha;
    this.ax=outerRad*Math.cos(this.angleA);
    this.ay=outerRad*Math.sin(this.angleA);

    var R=radius/Math.cos(Math.PI/angleCount);
    this.angleB=getRad(theta)-Math.PI/angleCount;

    this.bx=R*Math.cos(this.angleB);
    this.by=R*Math.sin(this.angleB);

    this.angleC=this.angleA-2*Math.PI/angleCount;
    this.cx=outerRad*Math.cos(this.angleC);
    this.cy=outerRad*Math.sin(this.angleC);
};

// 畫背景
obj.paintBg=function(ctx){
    context.drawImage(this.img,0,0,800,800,-200,-200,400,400);
};

// 描光闌
obj.paint=function(ctx){

    for(var i=0;i<angleCount;i++){
        ctx.save();

        ctx.fillStyle = getColor(i % 9);
        ctx.rotate(2*Math.PI/angleCount*i);

        ctx.beginPath();
        ctx.moveTo(this.ax,this.ay);
        ctx.lineTo(this.bx,this.by);
        ctx.lineTo(this.cx,this.cy);
        ctx.arc(0,0,this.outerRad,this.angleC,this.angleA,false);
        ctx.closePath();
        ctx.fill();

        ctx.restore();
    }
};

// 描基座
obj.paintBase=function(ctx){
    ctx.strokeStyle = "black";

    for(var i=0;i<4;i++){
        ctx.save();
        ctx.fillStyle = getColor(13);
        ctx.rotate(Math.PI/2*i);

        ctx.beginPath();

        ctx.arc(0,0,this.outerRad,0,Math.PI/2,false);
        ctx.lineTo(this.outerRad,this.outerRad);
        ctx.lineTo(this.outerRad,0);

        ctx.closePath();
        ctx.fill();

        ctx.restore();
    }
};

return obj;

}

// 角度得到弧度
function getRad(degree){
return degree/180*Math.PI;
}

// 得到顏色
function getColor(index){
var arr=["green","silver","lime","gray",
"white","yellow","maroon","navy",
"red","blue","purple","teal","fuchsia",
"aqua","black"];

if(index>arr.length){
    index=index % arr.length;
}

return arr[index];

}

//-->
</script>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：動(dòng)態(tài)正17邊光闌Canvas代碼，借此向十九世紀(jì)偉大數(shù)學(xué)家高斯致敬-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article20/eihco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、面包屑導(dǎo)航、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開發(fā)