- HTML5 Canvas Cookbook
- Eric Rowell
- 233字
- 2021-08-27 12:08:06
Drawing a circle
Although the HTML5 canvas API doesn't support a circle method, we can certainly create one by drawing a fully enclosed arc.
How to do it...
Follow these steps to draw a circle centered on the canvas:
- Define a 2D canvas context:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); - Create a circle using the
arc()method, set the color fill using thefillStyleproperty, and then fill the shape with thefill()method:context.arc(canvas.width / 2, canvas.height / 2, 70, 0, 2 * Math.PI, false); context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); }; - Embed the canvas tag inside the body of the HTML document:
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> </canvas>
How it works...
As you might recall from Chapter 1, we can create an arc using the arc() method which draws a section of a circle defined by a starting angle and an ending angle. If, however, we define the difference between the starting angle and ending angle as 360 degrees (2π), we will have effectively drawn a complete circle:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
推薦閱讀
- Learning Microsoft Azure Storage
- Verilog HDL數字系統設計入門與應用實例
- 工業機器人入門實用教程（KUKA機器人）
- Embedded Programming with Modern C++ Cookbook
- 運動控制器與交流伺服系統的調試和應用
- INSTANT Heat Maps in R：How-to
- INSTANT Puppet 3 Starter
- C#求職寶典
- MongoDB 4 Quick Start Guide
- Oracle 11g Anti-hacker's Cookbook
- PostgreSQL 10 High Performance
- Python語言從入門到精通
- CPLD/FPGA技術應用
- ARM嵌入式系統開發完全入門與主流實踐
- 軟件需求最佳實踐