原创。定义一个能够画出具有多个半径的'椭圆'的方法: functionmulti_radius_ellipse(x0,y0,r1,r2,r3,r4,rotation,fills,g) *x0,y0(椭圆中心),r1,r2,r3,r4(椭圆的4个半径), *rotation(相对椭圆中心顺时针旋转的度
function multi_radius_ellipse(x0,y0,r1,r2,r3,r4,rotation,fills, g)
* x0,y0(椭圆中心), r1,r2,r3,r4 (椭圆的 4 个半径),
* rotation(相对椭圆中心顺时针旋转的度数),
* fills(true：填充 fill, false： 只画边 stroke),g(画笔)
1. [代码]定义一个画多个半径'椭圆'的方法，画2016猴年图标
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>猴年</title>
<script>
function drawMonkey(){
var g = document.getElementById("monkey").getContext("2d");
g.fillStyle="orange";
multi_radius_ellipse(260,82,75,200,70,200,0,true, g);
g.strokeStyle="grey";
g.lineWidth=3;
multi_radius_ellipse(260,82,75,200,70,200,0,false, g);
g.font="80px KAITI";
g.fillStyle="blue";
g.fillText("猴",69,100);
g.fillText("年",354,100);
g.save();
g.font="80px ARIAL";
var s= new Array("2","0","1","6");
var r=245;
var x0=260;
var y0=240;
g.translate(x0,y0);
g.rotate(Math.PI/180*36);
g.font="80px ARIAL";
g.fillStyle="#9933FA";
for (var i=0;i<4;i++){
g.fillText(s[i],0,r);
g.rotate(-Math.PI/180*20);
}
g.restore();
ear(); //画两个耳朵
//头
var grd=g.createRadialGradient(0,-100,1,0,-100,60);
grd.addColorStop(0,'white'); //脑门亮: 白色
grd.addColorStop(1,"#802A2A");
g.fillStyle=grd;
multi_radius_ellipse(260,180,130,142,120,142,0,true , g);
//g.arc(260,180,10,0,Math.PI*2);
//g.fill();
//嘴 外围
g.fillStyle="#802A2A";
multi_radius_ellipse(260,310,130,162,112,162,0,true, g);
//嘴 内围
g.fillStyle="white";
multi_radius_ellipse(260,310,115,147,97,147,0,true, g);
drawEye();
//嘴
g.save();
g.lineCap="round";
g.strokeStyle="red";
g.lineWidth=14;
g.beginPath();
g.moveTo(161,302);
g.quadraticCurveTo(260,376,359,303);
g.stroke();
g.restore();
//鼻
g.save();
g.lineCap="round";
g.strokeStyle="brown";
g.lineWidth=10;
g.beginPath();
g.moveTo(247,280);
g.quadraticCurveTo(260,290,279,280);
g.stroke();
g.restore();
}
function ear(){
var g = document.getElementById("monkey").getContext("2d");
//右耳
g.fillStyle="#802A2A";
multi_radius_ellipse(100,203,63,43,70,41,0,true, g);
g.fillStyle="white";
multi_radius_ellipse(100,200,42,28,51,28,0,true, g);
//左耳
g.fillStyle="#802A2A";
multi_radius_ellipse(427,202,62,41,70,39,0,true, g);
g.fillStyle="white";
multi_radius_ellipse(426,200,42,28,51,28,0,true, g);
}
function drawEye(){
var g = document.getElementById("monkey").getContext("2d");
g.save();
g.strokeStyle="#B0E0E6";
g.lineWidth=10;
//右眼
g.fillStyle="white";
multi_radius_ellipse(205,190,90,70,65,70,0,true, g);
//左眼球
g.fillStyle="black";
multi_radius_ellipse(213,200,36,27,30,27,0,true, g);
//左眼珠
g.fillStyle="white";
multi_radius_ellipse(216,181,10,10,10,10,0,true, g);
g.save();
g.translate(115,0);
//左眼
multi_radius_ellipse(205,190,90,70,65,70,0,true, g);
//眼框
g.fillStyle="black";
multi_radius_ellipse(213,200,36,27,30,27,0,true, g);
g.fillStyle="white";
multi_radius_ellipse(216,181,10,10,10,10,0,true, g);
g.restore();
//眼框
multi_radius_ellipse(213,198,45,39,45,39,0,false, g);
multi_radius_ellipse(328,198,45,39,45,39,0,false, g);
g.restore();
}
/* 画具有多个半径的椭圆:
* x0,y0(椭圆中心), r1,r2,r3,r4 (椭圆的 4 个半径),
* rotation(相对椭圆中心顺时针旋转的度数),
* fills(true：填充 fill, false： 只画边 stroke),g(画笔)
*/
function multi_radius_ellipse(x0,y0,r1,r2,r3,r4,rotation,fills, g){
g.save();
g.translate(x0,y0);
g.rotate(Math.PI/180*rotation);
g.beginPath();
g.moveTo(r2,0);
for (var i=0;i<90;i++)
g.lineTo(r2*Math.cos(Math.PI/180*i),r3*Math.sin(Math.PI/180*i));
for (var i=90;i<180;i++)
g.lineTo(r4*Math.cos(Math.PI/180*i),r3*Math.sin(Math.PI/180*i));
for (var i=180;i<270;i++)
g.lineTo(r4*Math.cos(Math.PI/180*i),r1*Math.sin(Math.PI/180*i));
for (var i=270;i<360;i++)
g.lineTo(r2*Math.cos(Math.PI/180*i),r1*Math.sin(Math.PI/180*i));
g.closePath();
if (fills) g.fill(); else g.stroke();
g.restore();
}
</script>
<style>
#monkey{
background-color:#6FC;
}
</style>
</head>
<body onLoad="drawMonkey()">
<canvas id="monkey" width="530" height="500"></canvas>
</body>
</html>