首頁 > 開發者 > JavaScript
標籤：math 弧度 als 轉化 圓心 ges bezier 技術分享
：<body><canvas id="test" width="800" height="300"></canvas><script type="text/javascript">//一個工具函數，用於將角度從角度制轉化成弧度制function rads(x){ return Math.PI*x/180;}var canvas = document.getElementById(‘test‘);var c = canvas.getContext("2d");//繪製一個圖形，如果需要橢圓的話則進行相應的縮放和旋轉即可//由於沒有當前點，因此繪製的圖形不需要當前點到圓形起點之間的直線c.beginPath();c.arc(75,100,50,//圓心位於（75,100），半徑為500,rads(360),false);//從0度到360順時針旋轉//繪製一個楔，角度從x軸正向順時針度量//要注意的是arc（）方法會將當前點和弧形起點用直線相連c.moveTo(200,100);//從圓心開始c.arc(200,100,50,//圓心和半徑rads(-60),rads(0),//從-60度到0度false);//順時針c.closePath();//將半徑添加到圓心//同樣的楔，但方向不同c.moveTo(325,100);c.arc(325,100,50,rads(-60),rads(0),//從-60度到0度true);//逆時針c.closePath();//使用acrTo（）方法來繪製圓角，繪製一個一點（400,50）位左上方同時還帶有不同半徑角的正方形c.moveTo(450,50);//從上邊的中點開始c.arcTo(500,50,500,150,30);//添加部分上邊和右上方c.arcTo(500,150,400,150,20);//添加右上方和右下角c.arcTo(400,150,400,50,10);//添加底邊和坐下角c.arcTo(400,50,500,50,0);//添加走遍左上方c.closePath();//二次方貝茲曲線，一個控制點c.moveTo(75,250);//從點（75,200）開始c.quadraticCurveTo(100,200,175,250);//畫一條以一直到到點（175,250）結束的曲線c.fillRect(100-3,200-3,6,6);//標記控制點（100,200）//三次貝茲路徑c.moveTo(200,250);//從點（200,250）開始c.bezierCurveTo(220,220,280,280,300,250);//畫一條以一直到點（300,250）結束的曲線c.fillRect(200-3,220-3,6,6);//標記控制點c.fillRect(280-3,280-3,6,6);//定義一些圖形屬性並繪製曲線c.fillStyle="#aaa";c.lineWidth = 5;c.fill();</script></body>
JavaScript+canvas 利用貝茲路徑繪製曲線
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
