<body>
<div id=
"canvas-warp"
>
<canvas id=
"canvas"
style=
"display: block; margin: 200px auto;"
>
你的浏览器居然不支持Canvas!
</canvas>
</div>
<script>
window.onload =
function
() {
var
canvas = document.getElementById(
"canvas"
);
canvas.width = 400;
canvas.height = 400;
var
context = canvas.getContext(
"2d"
);
function
drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) {
context.beginPath();
context.arc(x2, y2, r2, a2, b2 * Math.PI);
context.strokeStyle = lineColor;
context.fillStyle = FillColor;
context.fill();
context.stroke();
};
function
drawsArc(x, y, r, l1, l2) {
context.beginPath();
context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI);
context.strokeStyle =
"black"
;
context.stroke();
};
function
darwEyes(x1, y1, a1, b1) {
context.strokeStyle =
"#754924"
ParamEllipse(context, x1, y1, a1, b1);
function
ParamEllipse(context, x, y, a, b) {
var
step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y);
for
(
var
i = 0; i < 2 * Math.PI; i += step) {
context.lineTo(x + a * Math.
cos
(i), y + b * Math.sin(i));
}
context.closePath();
context.fillStyle =
"#754924"
;
context.fill();
context.stroke();
};
};
drawCircle(200, 200, 200, 0, 2,
"#EEE685"
,
"#FCF200"
);
context.strokeStyle =
"#754924"
darwEyes(116, 130, 18, 25);
drawCircle(110, 127, 12, 0, 2,
"#754924"
,
"#F5F5F5"
);
darwEyes(296, 130, 18, 25);
drawCircle(290, 127, 12, 0, 2,
"#754924"
,
"#F5F5F5"
);
drawsArc(100, 100, 50, 1.3, 1.7);
drawsArc(300, 100, 50, 1.3, 1.7);
drawsArc(200, 120, 180, 0.3, 0.7);
}
</script>
<body>