HTML5canvas如何绘制圆形？（代码实例）-

我们来直接看示例

代码如下

  
  
  

  


  
  
Canvas Demo

运行结果

浏览器上执行上述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如何绘制圆形？（代码实例）的详细内容，更多请关注 第一PHP社区 其它相关文章！