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如何绘制圆形？（代码实例）的详细内容，更多请关注jquery中文网其它相关文章！
-->您可能感兴趣的文章：
canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结
HTML5 canvas如何绘制圆形？（代码实例）
canvas渐变色：canvas如何实现渐变色的效果？
html5 canvas有什么用?HTML5最新的canvas元素详解
html5 canvas用来绘制弧形的代码实现
h5Canvas绘制五星红旗的实例讲解
H5动画--canvas绘制圆环百分比进度的实例
如何用canvas绘制矩形？canvas画矩形的两种方法介绍
怎样用canvas来绘制弧线和圆
如何使用canvas的得到验证码的效果（附源码）