2. 科技
    3. canvas --用循环画圆

    canvas --用循环画圆

    科技2022-07-11  98

    本篇博客主要介绍圆方面的简单应用以及用循环画下面的栗子 在canvas中绘制圆形, 我们将使用以下方法:arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean)，前面为圆心坐标，半径，开始角度，结束角度，顺时针或是逆时针，可用fasle，或true或1和0等，最后一个可以省略，省略默认顺时针

    栗子

    这里我们用一个综合的栗子来说明 假如我们要实现这个效果，那么我们应该怎么做呢？可以先思考一下

    第一步 创建一个canvas画布

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { text-align: center; } canvas { box-shadow: 0 0 10px #333; } </style> </head> <body> <canvas width="420" height="600"> //为了防止用户浏览器不兼容的情况发生 您的浏览器版本太低，建议使用高阶版本浏览器!!! </canvas> </body> </html>

    加了一点小样式方便观察效果

    第二步 判断是否支持canvas,如果支持创建画笔

    首先获取canvas,然后创建画笔

    var oCanvas=document.querySelector('canvas'); // 判断是否支持 if(oCanvas.getContext){ var ctx=oCanvas.getContext('2d'); }

    第三步

    方法一

    由于内容比较简单，直接上代码

    // 创建路径 ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI); // 描边 ctx.stroke(); ctx.beginPath(); ctx.arc(200, 75, 50, 0, 1.5 * Math.PI, 0); ctx.stroke(); ctx.beginPath(); ctx.arc(350, 75, 50, 0, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(75, 200, 50, 0, Math.PI, 1); ctx.stroke(); ctx.beginPath(); ctx.arc(200, 200, 50, -Math.PI / 2, 0); ctx.stroke(); ctx.beginPath(); ctx.arc(350, 200, 50, -Math.PI / 2, Math.PI * 1.5); ctx.stroke(); ctx.beginPath(); ctx.arc(75, 350, 50, 0, Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(200, 350, 50, 0, 1.5 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(350, 350, 50, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(75, 500, 50, 0, Math.PI, 1); ctx.fill(); ctx.beginPath(); ctx.arc(200, 500, 50, 0, 1.5 * Math.PI, 1); ctx.fill(); ctx.beginPath(); ctx.arc(350, 500, 50, 0, Math.PI * 2, 1); ctx.fill();

    每一次必须要有开始路径，结束可以省略 如图：

    方法二

    仔细观察你可以发现，上面两排都是描边，下面两排是填充，别的我们一步步看

    for(var i=0;i<4;i++){ //控制 三列 for(var j=0;j<3;j++){ // 开始路径 ctx.beginPath() // i不变 x不变 因为每列的x不变 // j不变 y不变 因为每行的y不变 var x=75+j*150; var y=75+i*150; // 开始的角度 var sta=0; // 结束的角度 拿第一排，第二排看， // 1 Math.PI 1.5*Math.PI 2*Math.PI // 看第二排 和第一排刚好是2*Math.PI的差值，所以这里我们可以利用方法中的最后一个参数 var end=Math.PI+(Math.PI*j)/2; var anticlockwise=(i%2)==0?0:1; ctx.arc(x,y,50,sta,end,anticlockwise) //上面两排都是描边，下面两排是填充 if(i<2){ ctx.stroke() }else{ ctx.fill() } }

    效果如下： 效果和上面差不多，有一些细微差别，距离的问题，大家可以微调。

    Processed: 0.014, SQL: 8