java实心圆_html5使用canvas画空心圆与实心圆

摘要：这篇HTML5栏目下的“html5使用canvas画空心圆与实心圆”，介绍的技术点是“canvas、Html5、空心、使用、与”，希望对大家开发技术学习和问题解决有帮助。

这里给大家分享的是一个学习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();