canvas --用循环画圆

本篇博客主要介绍圆方面的简单应用以及用循环画下面的栗子
在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()}}

效果如下：

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

canvas --用循环画圆相关推荐

android微信头像无显示,canvas用arc画圆安卓显示问题，获取微信头像不显示问题...
代码如下: onLoad(options) { const height = app.globalData.window_height; const width = app.globalData.wi ...
canvas画圆、随机统计图以及清除画布
1.画圆以及圆弧 <style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/} </s ...
Canvas学习：绘制圆和圆弧
圆和圆弧是图形中基本图形之一,今天我们来了解在Canvas中怎么绘制圆和圆弧.在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单.在Canvas中,CanvasRenderingContext ...
canvas画圆,canvas圆环进度条效果,vue
代码如下 <template><section class="container"><div class="canvas-box" ...
canvas笔记-使用canvas画圆及点阵的使用
如下例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
canvas画条形图微信小程序_小程序-引入 echart 图表画圆饼图
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas 在github上下载echarts ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...

canvas --用循环画圆

栗子

第一步创建一个canvas画布

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

第三步

方法一

方法二

canvas --用循环画圆相关推荐

最新文章

热门文章

canvas --用循环画圆

栗子

第一步 创建一个canvas画布

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

第三步

方法一

方法二

canvas --用循环画圆相关推荐

最新文章

热门文章

第一步创建一个canvas画布

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