HTML5 canvas如何绘制圆形?(代码实例)
导读:收集整理的这篇文章主要介绍了HTML5 canvas如何绘制圆形?(代码实例),觉得挺不错的,现在分享给大家,也给大家做个参考。canvas能用于绘制各种图形,那么如何使用HTML5 canvas绘制一个圆形呢?本篇文章就来给大家介绍关于H...
收集整理的这篇文章主要介绍了HTML5 canvas如何绘制圆形?(代码实例),觉得挺不错的,现在分享给大家,也给大家做个参考。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()" 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('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如何绘制圆形?(代码实例)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5 canvas如何绘制圆形?(代码实例)
本文地址: https://pptw.com/jishu/584615.html