canvas-圓弧

2024-04-27 15:08:11

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>canvas-圓弧</title>    <style>        #canvas{            border: 1px solid palevioletred;        }    </style>    <script>      window.onload = function (){          //獲取到canvas元素          var canvas = document.getElementById('canvas');          //獲取canvas中的畫圖環境          var context = canvas.getContext('2d');          //畫筆移動初始位置          context.moveTo(100,100)          //畫直線 .lineTo(終止X坐標,終止Y坐標);         // context.lineTo(300,100);          //畫圓弧的方法：三個點 + 圓弧半徑  = 圓弧 （其中：X0，Y0是基于上次的點，所以省去不傳參）          //畫圓弧 .arcTo(X1坐標,Y1坐標,X2坐標,Y2坐標,半徑);          context.arcTo(350,100,350,150,50);         // context.lineTo(350,350);          context.arcTo(350,400,300,400,50);         // context.lineTo(100,400);          context.arcTo(50,400,50,350,50);         // context.lineTo(50,150);          context.arcTo(50,100,100,100,50);          //   context.closePath();和context.stroke();自帶一個機制：          // 在畫圓弧時，會自動補上一條過上一次的點的相切線段          //所以，在繪制圓弧時可以省寫 context.lineTo();方法          //描邊/描線          context.stroke();      }    </script></head><body>    <canvas id="canvas" width="500px" height="500px">    </canvas></body></html>

上一篇：canvas-文字

下一篇：SASS的安裝和使用