你的位置:首页 > 网页设计

[网页设计]HTML5画布(圆形)


案例1:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fill;
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="200" height="100" >您的浏览器不支持</canvas>

</body>
</html>

效果图:

注释:

(1)开始创建路径:

         cxt.beginPath();

(2)创建圆形路径:

         cxt.arc( x , y , radius , startAngle , endAngle , anticlockwise )

         x为绘制圆形的起点横坐标;y为绘制圆形的起点纵坐标;radius为圆形半径;startAngle为开始角度;endAngle为结束角度,

         anticlockwise为是否按顺时针方向进行绘制,true为顺时针,false为逆时针方向绘制。

         arc方法不仅可以绘制圆形,也可以用来绘制圆弧,只需指定开始角度与结束角度,如:Math.PI*1; 

       效果图:

        

(3)关闭路径:

        cxt.closePath();

(4)绘制图形:

        cxt.fill();

        绘制图形时,除了可以使用fill方法(填充图形),还可以使用stroke方法(绘制图形边框)。

 

案例2:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
for(var i=0;i<10;i++)
{
cxt.beginPath();
cxt.arc(i*25,i*25,i*10,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle='rgba(255,0,0,0.25)';
cxt.fill();
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="500" height="350" >您的浏览器不支持</canvas>

</body>
</html>

效果图:

如果把上例中开始创建路径语句与关闭路径这一语句删除,会绘制出怎样的图形?

案例3:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
for(var i=0;i<10;i++)
{
cxt.arc(i*25,i*25,i*10,0,Math.PI*2,true);
cxt.fillStyle='rgba(255,0,0,0.25)';
cxt.fill();
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="500" height="350" >您的浏览器不支持</canvas>

</body>
</html>
效果图: