標籤：
<body> <!--畫板--> // 當瀏覽器不支援的時候才會出現文字 <canvas id="canvas" style="background-color: black;">您當前的版本不支援 </canvas> <script type="text/javascript"> // 拿到畫板 var canvas = document.getElementById(‘canvas‘); canvas.width = 1000; canvas.height = 1000; // 拿到上下文 var context = canvas.getContext(‘2d‘); // 設定線條的顏色 context.strokeStyle = ‘red‘; // 設定線條的寬度 context.lineWidth = 5; // 繪製直線 context.beginPath(); // 起點 context.moveTo(200, 200); // 終點 context.lineTo(500, 200); context.closePath(); context.stroke(); // 繪製弧線 context.beginPath(); /* * params * 圓心x座標 * 圓心y座標 * 半徑 * 起始角度 * 結束角度 * 方向，true 逆時針 false 順時針 預設false，不寫表示false */ context.arc(200,200,100,0,Math.PI/2,false); context.closePath(); context.stroke(); context.strokeStyle = ‘red‘; context.arc(200,200,100,0,Math.PI/2, true); context.closePath(); context.stroke(); </script></body>
js 利用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
