<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
<script type="text/javascript">
window.onload = function() {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
drawStar(ctx, 150, 150, 60, 30);
}
function drawStar(ctx, x0, y0, R, r) {
ctx.save();
ctx.beginPath();
for(let i=0; i<5; i++) {
let x1 = Math.cos((18+72*i)/180*Math.PI) * R + x0
let y1 = -Math.sin((18+72*i)/180*Math.PI) * R + y0
let x2 = Math.cos( (54+72*i)/180*Math.PI)*r + x0
let y2 = -Math.sin( (54+72*i)/180*Math.PI)*r + y0
ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2);
}
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
ctx.restore();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
Processed:
0.009, SQL:
9
