本文所分享的知识点是【html5使用canvas画空心圆与实心圆】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。

html5使用canvas画空心圆与实心圆

这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题，非常简单。

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>
 

代码如下:
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
//画一个空心圆
cxt.beginPath();
cxt.arc(200,200,50,0,360,false);
cxt.lineWidth=5;
cxt.strokeStyle="green";
cxt.stroke();//画空心圆
cxt.closePath();
//画一个实心圆
cxt.beginPath();
cxt.arc(200,100,50,0,360,false);
cxt.fillStyle="red";//填充颜色,默认是黑色
cxt.fill();//画实心圆
cxt.closePath();
//空心和实心的组合
cxt.beginPath();
cxt.arc(300,300,50,0,360,false);
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="green";
cxt.stroke();
cxt.closePath();

关于html5使用canvas画空心圆与实心圆的相关讨论如下：

　　相关问题：html canvas这两种画圆方式怎么不同？

　　答：因为从 0 度角，到 360度，顺时针画，是一个圆。逆时针画，是一个点。 你不考虑 360 度的情况，把 360 改成 180，会更容易理解一些。 >>详细

　　相关问题：html5中画圆总是画不圆呢？下面截图是效果和代码，...

　　答： var can = document.getElementById("can"); var paint = can.getContext("2d"); paint.fillStyle = "#FF0000"; paint.beginPath(); paint.arc(100,100,50,0,Math.PI*2,true); paint.closePath(); paint.fill(); 复制过去运行一下就知道了。 >>详细

　　相关问题：html5中使用canvas绘制两点弧线箭头

　　答：回答完毕，采纳即可。yugivar Eye = function (a, b) { this.a = a; this.b = b; } Eye.prototype = { constructor : Eye, g : null, init : function () { var canvas = document.querySelector ("canvas"); this.g = canvas.getContext ("2d")... >>详细