canvas实现绘制圆形的代码怎么写-群英

您现在的位置是：群英 > 开发技术 > web开发

canvas实现绘制圆形的代码怎么写

Admin发表于 2022-05-16 11:38:07633 次浏览

这篇文章主要给大家介绍“canvas实现绘制圆形的代码怎么写”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“canvas实现绘制圆形的代码怎么写”文章能对大家有所帮助。
canvas能用于绘制各种图形，那么如何使用HTML5 canvas绘制一个圆形呢？本篇文章就来给大家介绍关于HTML5 canvas绘制圆形的方法，下面我们来看具体的内容。

我们来直接看示例

代码如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
       function draw() {
          var canvas = document.getElementById('SimpleCanvas');

          if ( ! canvas || ! canvas.getContext ) {
            return false;
          }

          var cx = 360;
          var cy = 400;
          var radius = 36;

          var context = canvas.getContext('2d');
          context.beginPath();
          context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
          context.fillStyle = '#9fd9ef';
          context.fill();
          context.lineWidth = 1;
          context.strokeStyle = '#00477d';
          context.stroke();

      }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

运行结果

浏览器上执行上述HTML文件。将会显示如下效果

最后说明一点

arc()方法给出的圆的坐标是圆的中心坐标。

在上述的HTML代码中，将绘图部分设为下面的代码。

function draw() {
    var canvas = document.getElementById('SimpleCanvas');
    if ( ! canvas || ! canvas.getContext ) {
          return false;
    }
    var cx = 360;    
    var cy = 400;    
    var radius = 36;
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
    context.fillStyle = '#9fd9ef';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = '#00477d';
    context.stroke(); 
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(cx, cy);
    context.stroke();
    }

上述代码的显示效果如下，可以看到中心坐标是圆的中心。

到此这篇关于“canvas实现绘制圆形的代码怎么写”的文章就介绍到这了，感谢各位的阅读，更多相关canvas实现绘制圆形的代码怎么写内容，欢迎关注群英网络资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： canvas

上一篇： HTML5中不常用的标签有哪些，用法是怎样

下一篇： HTML5中button和submit的使用有何不同

推荐内容

PHP中替换第一位字符的方法和代码是什么
2022-12-14 11:21:38

Python使用中有哪些高效、实用的高级技巧
2022-08-19 17:53:01

新手学习Python有哪些关键字要掌握
2022-08-19 17:51:59

热门关键词

canvas离屏技术 canvas下雪效果 canvas· Canvas save canvas图片涂鸦功能 js,canvas,加载 canvas橡皮筋式画线 canvas粒子 canvas绘制图像 HTML5 canvas canvas 画笑脸 canvas元素 js,canvas,飞机大战 Canvas标签 canvas弹球 canvas波浪效果 canvas canvas登录背景 python矩阵特征向量 html5拖放 Android 插槽Slot golang设置定时任务 php特点 php去除特殊字符左连接特点 JavaScript,实现,气球,打字,游戏 Diff算法 c语言编写五子棋 php获取当前时间

热门信息

Python怎么样创建txt文件，写入方法是什么？
2022-01-24 19:23:44

pycharm怎么完全卸载？两个步骤帮你搞定
2022-01-04 18:53:44

Java中map判断是否存在key怎样做？教你两个方法
2022-01-26 18:39:38

Python中如何求阶乘？教你四个方法
2022-02-25 17:19:26

Python中怎样利用while求1到100的和？
2021-11-20 17:46:01

Java中string转date有哪些方式，怎样实现？
2022-01-18 18:00:09

用python如何读取csv文件，你知道几种方法？
2021-11-22 17:53:55

Python中怎么定义数组？教你三种方法
2022-01-13 18:58:11

laravel下怎样设置、获取和删除缓存，方法是什么？
2021-11-29 17:58:44

python中怎样统计元素出现的次数，方法有哪些？
2021-11-20 17:45:40