HTML5canvas绘制圆形的方法-创新互联
小编给大家分享一下HTML5 canvas绘制圆形的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联从2013年成立,公司以成都网站建设、成都网站制作、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户超过千家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。canvas能用于绘制各种图形,那么如何使用HTML5 canvas绘制一个圆形呢?
我们来直接看示例
代码如下
Canvas Demo
运行结果
浏览器上执行上述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绘制圆形的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!
网站名称:HTML5canvas绘制圆形的方法-创新互联
新闻来源:http://ybzwz.com/article/dpcpse.html