最近在做個人站，因為其實較碼碼來說，平時還是規劃和設計類的職能更多一些
就考慮做一個展示型的站點，順便也檢查下自己的學習成果
主頁的視覺這效果大致如下
其實總體來說布局是較為清晰的，四角+中間
中間分為左+右+下
難點其實是下部那條曲線，感謝@我教你跳傘咯幫忙
（為了方便其實已經修改過設計稿，原本繪制的錨點方向不統一，導致標準點坐標特別難計算）
變動如下
沒修改的時候整體比較平滑圓潤，但錨點雜亂（其實修改的更精細點也可以，但我比較糙漢）
修改后保留了整體的走向，使錨點方向統一可控
因為單段貝塞爾曲線的是由
【開始點】1個
【標準點】可能有多個
【結束點】1個
構成的，所以整齊統一的錨點能降低很多作業量
圖上我需要繪制的現段其實是由五段貝塞爾曲線拼接而成
拆解如圖
曲線置于一個844*154的矩形中，以便計算相對的點位坐標
<script>
//function draw() {
//var canvas=document.getElementById('canvas');
//var context=canvas.getContext('2d');
//context.beginPath();
context.moveTo(0,66); //藍色起始點也就是開始繪制的位置
context.quadraticCurveTo(133,1,225,1);//藍色
context.bezierCurveTo(317,1,493,92,519,92); //綠色
context.bezierCurveTo(546,92,523,47,458,47); //黃色
context.bezierCurveTo(395,47,626,153,711,153); //紅色
context.quadraticCurveTo(795,153,844,123);//紫色
//可以用context.strokeStyle和context.fillstyle規定顏色
//漸變其他可以考慮context.stroke
}
</script>
貝塞爾相關介紹點擊此處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/266684.html
標籤：其他
上一篇：無重復字符的最長子串
下一篇：HTML基礎——2