likes
comments
collection
share

canvas基础2 - arc - 画弧线

作者站长头像
站长
· 阅读数 28

系列文章目录

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

1、arc方法绘制弧线

  1. context.arc(圆心坐标x,圆心坐标y,半径值,从哪一个弧度值为始,结束弧度,弧度为顺时针还是逆时针默认false为顺时针)canvas基础2 - arc - 画弧线
  2. startingAngleendingAngle说明canvas基础2 - arc - 画弧线

    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>

    canvas基础2 - arc - 画弧线

  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>

    canvas基础2 - arc - 画弧线

3、closePath特性

closePath代表结束这个路径,如果当前路径没有封闭上,会自动封闭这个路径canvas基础2 - arc - 画弧线canvas基础2 - arc - 画弧线

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第一节,之后会持续更新,大家感觉还实用的话,关注或者点个赞都可以,谢谢啦

转载自:https://segmentfault.com/a/1190000041976624
评论
请登录