Html5 实现灯笼绘制

                 1 <script type="text/javascript">
 2//绘制椭圆 3function ParamEllipse(context, x, y, a, b) {
 4//max是等于1除以长轴值a和b中的较大者 5//i每次循环增加1/max，表示度数的增加 6//这样可以使得每次循环所绘制的路径（弧线）接近1像素 7var step = (a > b) ? 1 / a : 1 / b;
 8             context.fillStyle = "#ff0000";
 9            context.beginPath();
10             context.moveTo(x + a, y); //从椭圆的左端点开始绘制11for (var i = 0; i < 2 * Math.PI; i += step) {
12//参数方程为x = a * cos(i), y = b * sin(i)，13//参数为i，表示度数（弧度）14                 context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
15            }
16            context.closePath();
17            context.stroke();
18            context.fill();
19            context.closePath();
20        };
2122//绘制矩形23function FillRect(context, x, y, w, h, flag) {
24var grd = context.createLinearGradient(x+w/2, y, x + w/2, y + h);
25if (flag) {
26                 grd.addColorStop(0, "yellow");
27                 grd.addColorStop(1, "red");
28             } else {
29                 grd.addColorStop(0, "red");
30                 grd.addColorStop(1, "yellow");
31            }
32             context.fillStyle = grd;
33            context.fillRect(x, y, w, h);
34        }
3536//绘制线条37function SetLine(ctx, x, y, x1, y1) {
38            ctx.beginPath();
39             ctx.strokeStyle = "yellow";
40            ctx.moveTo(x,y);
41            ctx.lineTo(x1,y1);
42            ctx.stroke();
43            ctx.closePath();
44        }
45         window.onload = function () {
46var c = document.getElementById("myCanvas");
47var ctx = c.getContext("2d");
48var startX = 150; //中心坐标x49var startY = 300; //中心坐标y50var pWidth = 120; //椭圆长轴51var pHeigth = 80; //椭圆形短轴52var fWidth = 120; //矩形宽53var fheight = 40; //矩形高54//绘制椭圆55            ParamEllipse(ctx, startX, startY, pWidth, pHeigth);
56//在椭圆上方和下方绘制长方形，且有一半的高度和椭圆重叠57             FillRect(ctx, startX - fWidth / 2, startY - pHeigth - (fheight / 2), fWidth, fheight, true);
58             FillRect(ctx, startX - fWidth / 2, startY + pHeigth - (fheight / 2), fWidth, fheight, false);
59//在矩形下方绘制线条,8个单位一条线,长度为40，均匀分布在矩形下方60var lLen = fheight; //画线的范围始终在矩形之下61var lInterval = 8; //线与线之间的间隔62for (var i = 0; i < (fWidth / 8) + 1; i++) {
63                 SetLine(ctx, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2 + lLen);
64            }
65//对三部分进行拆解66//1. 上矩形 67var right = 380;
68             FillRect(ctx, startX - fWidth / 2 + right, startY - pHeigth - (fheight / 2) - 150, fWidth, fheight, true);
69//2. 中椭圆70             ParamEllipse(ctx, startX + right, startY - 50, pWidth, pHeigth);
71//3. 下矩形72             FillRect(ctx, startX - fWidth / 2 + right, startY + pHeigth - (fheight / 2) + 50, fWidth, fheight, false);
73//4. 下线74for (var i = 0; i < (fWidth / 8) + 1; i++) {
75                 SetLine(ctx, startX - fWidth / 2 + i * lInterval + right, startY + pHeigth + fheight / 2 + 100, startX - fWidth / 2 + i * lInterval + right, startY + pHeigth + fheight / 2 + lLen + 100);
76            }
77//画线，将其连接起来78var lsX = startX + pWidth + 20;
79var lsY = startY;
80var leX = startX + pWidth + 20 + 100;
81var leY = startY;
82             SetLine(ctx, lsX, startY - 30, leX - 30, leY - 150);
83             SetLine(ctx, lsX, startY - 15, leX, leY - 50);
84             SetLine(ctx, lsX, startY + 15, leX, leY + 100);
85             SetLine(ctx, lsX, startY + 30, leX - 30, leY + 150);
8687//左上标写上说明88             ctx.font = "35px Arial";
89var t = "灯笼组成--2016-11-13";
90             ctx.fillText(t, 50, 50);
91        }
9293     </script>