HTML5canvas绘制圆形的方法-创新互联

小编给大家分享一下HTML5 canvas绘制圆形的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联从2013年成立,公司以成都网站建设、成都网站制作、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户超过千家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。

canvas能用于绘制各种图形,那么如何使用HTML5 canvas绘制一个圆形呢?

HTML5 canvas绘制圆形的方法

我们来直接看示例

代码如下




  
  
  

  


  
  
Canvas Demo

运行结果

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

HTML5 canvas绘制圆形的方法

最后说明一点

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绘制圆形的方法

以上是HTML5 canvas绘制圆形的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!


网页标题:HTML5canvas绘制圆形的方法-创新互联
当前地址:http://scyanting.com/article/dpcpse.html