java canvas 画圆_js+canvas简单绘制圆圈的方法

本文实例讲述了js+canvas简单绘制圆圈的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

canvas画圆圈

function drawCircle(id){

var canvas = document.getElementById(id);

if(canvas ) {

var context = canvas.getContext("2d");

context.fillStyle = "gray";

context.strokeStyle = "black";

context.fillRect(0, 0, 400, 400);

context.beginPath();

context.arc(100, 100, 50, 0, Math.PI*2, true);

context.closePath();

context.fillStyle = "green";

context.fill();

} else {

return;

}

}

window.onload = function () {

drawCircle("canvas");

}

---

希望本文所述对大家JavaScript程序设计有所帮助。