HTML5 canvas如何绘制圆形？

百变鹏仔 3个月前 (10-17) #H5教程

文章标签圆形

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(&#39;SimpleCanvas&#39;);          if ( ! canvas || ! canvas.getContext ) {            return false;          }          var cx = 360;          var cy = 400;          var radius = 36;          var context = canvas.getContext(&#39;2d&#39;);          context.beginPath();          context.arc(cx, cy, radius, 0, 2 * Math.PI, false);          context.fillStyle = &#39;#9fd9ef&#39;;          context.fill();          context.lineWidth = 1;          context.strokeStyle = &#39;#00477d&#39;;          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(&#39;SimpleCanvas&#39;);    if ( ! canvas || ! canvas.getContext ) {          return false;    }    var cx = 360;        var cy = 400;        var radius = 36;    var context = canvas.getContext(&#39;2d&#39;);    context.beginPath();    context.arc(cx, cy, radius, 0, 2 * Math.PI, false);    context.fillStyle = &#39;#9fd9ef&#39;;    context.fill();    context.lineWidth = 1;    context.strokeStyle = &#39;#00477d&#39;;    context.stroke();     context.beginPath();    context.moveTo(0, 0);    context.lineTo(cx, cy);    context.stroke();    }

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

文章推荐

HTML5 canvas如何绘制圆形？

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集