js+html5实现canvas绘制椭圆形图案的方法
本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法，HTML5canvas没有画椭圆的方法，以下代码可以画出椭圆，分享给大家供大家参考，具体实现方法如下：
1、在一个隐式的画布(将其CSS定义成：display:none;)上画园。
2、将隐式画布的影像，以不同的宽高比值，画在另一个显式的画布，以使园变成椭圆。
3、进而，加进动画功能。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>测试颜色背景</title>
<script>
varticker=0;
varcol=newArray("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000");
functiondrawBackground(){
varcanvasHide=document.getElementById("hide");//隐藏的画布
varg=canvasHide.getContext("2d");//找出隐藏画布hide的画笔g
g.clearRect(0,0,1200,800);//清理隐藏画布
vari=0;
do{//画不同颜色依次同心发散的园
g.beginPath();
vargrd=g.createRadialGradient(300,300,300-i*25,300,300,265-i*25);
grd.addColorStop(0,col[(0+i+ticker)%col.length]);
grd.addColorStop(1,col[(1+i+ticker)%col.length]);
g.fillStyle=grd;
g.arc(300,300,300-i*25,0,2*Math.PI);
g.fill();
i++;
}while(i<11);
//找出显式画布myCanvas的画笔gg
vargg=document.getElementById("myCanvas").getContext("2d");
gg.clearRect(0,0,myCanvas.width,myCanvas.height);//清理显式画布
/*将隐式画布hide的园形图像，
*以宽600,高300的比例,
*画到显式画布myCanvas,
*结果，隐式画布hide的园形图像，在显式画布myCanvas上成了椭圆
*/
gg.drawImage(canvasHide,0,0,600,300);
ticker++;
}
functionpreperation(){
setInterval('drawBackground()',1000);
}
</script>
<style>
#myCanvas{
position:absolute;
left:0px;
top:0px;
}
#hide{
display:none;
}
</style>
</head>
<bodyonLoad="preperation()">
<canvasid="myCanvas"width="600"height="400"></canvas>
<canvasid="hide"width="600"height="600"></canvas>
</body>
</html>
希望本文所述对大家的web程序设计有所帮助。