canvas --用循环画圆

于 2020-10-03 18:44:39 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： 小白 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yannnnnm/article/details/108912084
版权

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

栗子

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

第一步 创建一个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>

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

第二步 判断是否支持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();

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

方法二

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

 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()
                }
               
            }

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

Yannnnnm
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java canvas画圆圈_绘制多个可拖动的圆圈HTML5 Canvas
weixin_27015733的博客
02-17 409
您可以使用 ctx.clearRect() 清除画布而不重新加载页面，如下所示：ctx.clearRect(0, 0, canvas.width, canvas.height);Working Live Demo:var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var canvasOf...
canvas 绘制 多个 圆形进度条
zp_love666的博客
08-13 848
var canvas = document.createElement("canvas"); canvas.width =110; canvas.height = 110; document.body.innerHTML=''; document.body.appendChild(canvas); var ctx=canvas.getContext("2d"); ctx.translate(55, 55); ctx.rotate(1.5*Math.PI); var list = [{
canvas画布内部重复画圆
diaoting2815的博客
11-29 665
<!DOCTYPE html><html><head> <title>canvas example</title> <meta charset="utf-8"></head><body><canvas id="canvas" width="600px" height="600p...
使用 canvas 画圆
雾里看花叹朦胧
12-25 670
使用原生的 HTML5 和 JS ，在屏幕中动态生成随机的 50 个小圆：arc()画圆弧的方法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟位置是0度），结束角，规定应该是顺时针还是逆时针画图)其中最后一个参数是可选的，true=逆时针，false =顺时
canvas动画循环
Abudula__的博客
12-12 2215
动画循环是制作动画效果的基础，由3个部分组成。 先后是更新操作，清楚操作，绘制操作，并且会不断重复的进行。 如下有demo代码，有助于更好地理解. &lt;canvas id="canvas" width="500" height="500" style="background-color:red;"&gt;&lt;/canvas&gt; &lt;script&gt;
如何使用canvas实现多个随机圆运动
nosayno的博客
11-13 5563
此段代码使用canvas画布实现多个圆形自上向下滑落，圆的大小及颜色随机，背景图片可根据自己的喜好更换，只需将大小与画布大小统一即可。 文章下附有效果图       id="canvas" width="493px" height="332px" > <script type="text/javascript"> var canvas=document.getElement
HTML5 Canvas圆点发光特效特效代码
03-20
压缩包中的"使用帮助.txt"可能包含了如何在项目中引入和使用这个特效的详细步骤，而"谷普下载.url"和"说明.url"可能是指向下载页面和更详细介绍的链接。"jiaoben6293"可能是一个JavaScript文件，其中包含了实现这个...
HTML5 canvas墨迹动画代码.zip
05-25
2. **路径绘制**：在canvas上，使用`beginPath()`开始一个新的路径，然后用`moveTo()`移动到起点，`lineTo()`添加线段，最后`stroke()`绘制路径。墨迹动画可能会使用这些方法模拟墨水从点击位置扩散的效果。 3. **...
game-fishing-single:用canvas写单版钓鱼大师［完成］
06-28
【标题】"game-fishing-single:用canvas写单版钓鱼大师［完成］"涉及的核心知识点是使用HTML5的Canvas API来开发一款单机版的钓鱼游戏。Canvas是HTML5的一个重要组成部分，它允许开发者在网页上进行动态图形绘制，...
HTML5 canvas炫酷拖拽圆球效果
06-05
它的基本结构是`<canvas>`标签，可以通过ID选择器获取到canvas元素，然后使用JavaScript的`CanvasRenderingContext2D`对象进行绘图操作。 2. **Canvas绘图** - `beginPath()`：开始一个新的路径。 - `arc(x, y, ...
Canvas绘制点与点相交线样式代码.zip
07-04
6. **动画循环**：使用`requestAnimationFrame()`创建动画循环，不断更新和重绘Canvas，以实现动态效果。 在`jiaoben4984.js`或类似命名的脚本文件中，可以看到这些功能的实现。例如，它可能包含一个`animate`函数...
用canvas制作圆形
weixin_42859796的博客
01-26 514
用canvas制作圆形画图步骤 步骤 1、开始创建路径 2、创建图形路径 3、创建完成关闭路径 4、设置绘制样式然后调用绘制方法进行绘制 核心代码 function draw(id){ var canvas = document.getElementById(id);//获取元素 var context = canvas.getContext('2d');//获取上下文 context.f...
小程序canvas循环绘制内容的问题
qq_40816649的博客
04-23 3963
这次的业务逻辑中要用到小程序canvas。 这个canvas的要求是一段文字中间会加入一张图片然后在接下去写一段文字内容。并且文字和图片是随机出现的，因此只能用for循环来做。这里有一个问题就是canvas绘制文字的速度比绘制图片的速度快很多，一个for循环之后，for循环中的文字绘制已经执行完了但是，for循环中的图片还没有绘制好，就已经执行了for循环外面的context.draw()方法绘制...
canvas画圆
power8988的博客
08-05 1135
用canvas简单写几个同心圆吧； 代码如下：<!doctype html> <html> <head> <style> canvas { background: yellow } </style> <meta charset="utf-8"> </head> <body onload="draw()"> <canva
用canvas画布画同心圆（弧）
weixin_44286392的博客
07-27 1377
学会了用canvas画图之后，只需加个for循环，就可同时画很多图。 画图可参考（以太极图为例）：https://blog.csdn.net/weixin_44286392/article/details/107413822 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head&g
HTML5系列代码：连续绘制的两个圆形
BLOG域名:programb.blog.csdn.net
06-27 861
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。 提示:你可以在HTML页面中使用多个 canvas元素。 使用 style 属性来添加边框。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>连续绘制的两个圆形</title> <style type="text/css"> canvas.
canvas 画图----arc函数
越努力,越幸运~~
08-12 2215
arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）； 这个主要是用来画弧形的，有一些地方需要注意，调用arc的时候，canvas的宽和高必须写成width和height属性，否则画出的弧形会出现意想不到的问题： 下面第一个图是将canvas的宽度和高度写在外
canvas画波形图
yazi1297的专栏
09-27 5568
最近公司要在浏览器上加个波形图，
canvas画圆的几个关键点
阿超的博客
04-06 1542
先给出代码 <canvas id="drawing" width="200px" height="200px"></canvas><script type="text/javascript"> var drawing=document.getElementById("drawing"); if(drawing.getContext){ var context=draw
python如何使用canvas画圆
最新发布
07-12
您可以使用Python的Tkinter库中的Canvas对象来绘制圆。 首先，您需要导入Tkinter库： ```python from tkinter import * ``` 然后，创建一个Tkinter窗口并实例化Canvas对象： ```python window = Tk() canvas = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值