canvas基础2 - arc - 画弧线

系列文章目录

本文是canvas基础2 - arc - 画弧线，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理视频课指路：慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础

1、arc方法绘制弧线

1. context.arc(圆心坐标x,圆心坐标y,半径值,从哪一个弧度值为始，结束弧度，弧度为顺时针还是逆时针默认false为顺时针)

2. startingAngle 和 endingAngle说明

   2、画圆

3. 顺时针画圆

   <canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
    当前浏览器不支持canvas，请更换浏览器后再试
   </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>

   

4. 逆时针画圆

   <canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
    当前浏览器不支持canvas，请更换浏览器后再试
   </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特性

closePath代表结束这个路径，如果当前路径没有封闭上，会自动封闭这个路径

4、2048棋盘demo

<canvas id="canvas" width="800" height="800" style="display: block;
background-color: #eee;margin: 10px auto;">
    不能使用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>

总结

本文为canvas第一节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦