Canvas foundation 2 - arc - draw arc

List of articles

This article is about canvas Basics 2 - arc - Draw arc , Easy to understand , Xiaobai has no trouble , According to MOOCS liuyubobobo The teacher's video lesson learning and sorting
Video lesson guide ： For class network liuyubobobo teacher Gorgeous countdown effect Canvas Fundamentals of drawing and animation

---

---

1、arc Method to draw an arc

1. context.arc( The coordinates of the center of the circle x, The coordinates of the center of the circle y, Radius value , Which radian value to start from , End arc , Whether the radian is clockwise or counterclockwise defaults false For clockwise )
   
2. startingAngle and endingAngle explain
   

2、 A circle

1. Draw a circle clockwise

<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
     The current browser does not support canvas, Please change your browser and try again 
</canvas>
<script> var canvas = document.getElementById('canvas') canvas.width = 1024 canvas.height = 768 if (canvas.getContext('2d')) {
       var context = canvas.getContext('2d') context.lineWidth = 5 context.strokeStyle = '#005588' context.arc(300, 300, 200, 0, 1.5 * Math.PI) context.stroke() } </script>

2. Draw a circle counterclockwise

<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
     The current browser does not support canvas, Please change your browser and try again 
</canvas>
<script> var canvas = document.getElementById('canvas') canvas.width = 1024 canvas.height = 768 if (canvas.getContext('2d')) {
       var context = canvas.getContext('2d') context.lineWidth = 5 context.strokeStyle = '#005588' context.arc(300, 300, 200, 0, 1.5 * Math.PI, true) context.stroke() } </script>

3、closePath characteristic

closePath Represents the end of this path , If the current path is not closed , Will automatically close this path

4、2048 The board demo

<canvas id="canvas" width="800" height="800" style="display: block; background-color: #eee;margin: 10px auto;">
     Out of commission canvas
</canvas>
<script> window.onload = function () {
       var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // drawRoundRect(context, 10, 10, 600, 500, 50) // fillRoundRect(context, 50, 50, 600, 500, 50, '#500') fillRoundRect(context, 150, 150, 500, 500, 10, '#bbada0') for (var i = 0; i < 4; i++) for (var j = 0; j < 4; j++) fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, '#ccc0b3') } function drawRoundRect(cxt, x, y, width, height, radius) {
       if (2 * radius > width || 2 * radius > height) return; cxt.save() cxt.translate(x, y) pathRoundRect(cxt, width, height, radius) cxt.strokeStyle = '#000' cxt.stroke() cxt.restore() } function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
       if (2 * radius > width || 2 * radius > height) return; cxt.save() cxt.translate(x, y) pathRoundRect(cxt, width, height, radius) cxt.fillStyle = fillColor || '#000' cxt.fill() cxt.restore() } function pathRoundRect(cxt, width, height, radius) {
       cxt.beginPath() cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2) cxt.lineTo(radius, height) cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI) cxt.lineTo(0, radius) cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2) cxt.lineTo(width - radius, 0) cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2) cxt.closePath() } </script>

---

summary

This paper is about canvas In the second quarter , After that, it will continue to update , If you feel it is still practical , It's OK to follow or like , Thank you very much!