HTML5 canvas如何绘制圆形？（代码实例）

2020-03-24 15:45:57

字体：大中小

来源：转载

供稿：网友

canvas能用于绘制各种图形，那么如何使用HTML5 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() >运行结果
浏览器上执行上述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(); }
上述代码的显示效果如下，可以看到中心坐标是圆的中心。
以上就是HTML5 canvas如何绘制圆形？（代码实例）的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。