<canvas id="myCanvas" width="600" height="300"></canvas>
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp(); //包含整个Canvas应用程序
}
function canvasSupport (e) {
return !!e.getContext;
}
function canvasApp () {
var myCanvas = document.getElementById('myCanvas');
if (!canvasSupport(myCanvas)) {
return;
}
var ctx = myCanvas.getContext('2d');
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
// 封装绘制五角星函数
function drawStar(ctx, x, y, R, r) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(
Math.cos((18 + i * 72) / 180 * Math.PI) * R + x,
-Math.sin((18 + i * 72) / 180 * Math.PI) * R + y
);
ctx.lineTo(
Math.cos((54 + i * 72) / 180 * Math.PI) * r + x,
-Math.sin((54 + i * 72) / 180 * Math.PI) * r + y
);
}
ctx.closePath();
ctx.stroke();
}
function drawScreen () {
ctx.strokeStyle = "red";
ctx.lineWidth = 10;
drawStar(ctx, 200, 120, 100, 50);
}
drawScreen();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.