系列文章目录

本文是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第一节，之后会继续更新，大家感觉还实用的话，关注或者点个赞都能够，谢谢啦