<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
canvas {
border: 1px solid rgba(0, 0, 0, .4);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
border-radius: 5px;
}
label,
input,
button,
select {
display: inline-block;
vertical-align: middle;
}
.wrapper div {
margin: 15px 0 10px;
}
input[type="number"] {
border:1px solid #ccc;
border-radius: 3px;
padding: 3px 5px;
width: 50px;
}
input[type="number"]:focus {
outline: none 0;
border-color: #008fb5;
box-shadow: 0 0 3px #008fb5;
}
button {
border-radius: 3px;
border: none;
background: #008fb5;
color: #fff;
padding: 5px 10px;
cursor: pointer;
box-shadow: 0 1px 0 rgba(0,0,0,.1) ,0 1px 0 rgba(0,0,0,.1);
}
button:focus,
button:active {
outline: none 0;
}
style>
head>
<body>
<div class="wrapper">
<div>
<label for="num">边数:label>
<input type="number" name="num" value="3" id="num">
<label for="radius">半径:label>
<input type="number" name="radius" value="100" id="radius">
<label for="sideIn">内切:label>
<input type="number" name="sideIn" value="1" id="sideIn">
<label for="alpha">Alpha:label>
<input type="number" name="alpha" value="0" id="alpha">
<label for="style">style:label>
<select name="style" id="style">
<option value="fill">filloption>
<option value="stroke">strokeoption>
select>
<label for="arcBox">外圆:label>
<input type="checkbox" name="arcBox" id="arcBox">
<button type="button" name="draw" id="draw">Drawbutton>
div>
<canvas id="canvasOne" width="700" height="300">
canvas>
div>
body>
html>
<script>
window.addEventListener('load', eventWindowLoaded, false);
var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var theCanvas = document.getElementById('canvasOne');
var ctx = theCanvas.getContext('2d');
Debugger.log('Drawing Canvas');
var w = theCanvas.width,
h = theCanvas.height,
btn = document.getElementById('draw'),
radius = document.getElementById('radius'),
num = document.getElementById('num'),
arcBox = document.getElementById('arcBox'),
style = document.getElementById('style'),
alpha = document.getElementById('alpha'),
sideIndent = document.getElementById('sideIn'),
xCenter = w / 2,
yCenter = h / 2;
btn.addEventListener('click', getValue, false);
function getValue(){
var numVal = num.value,
rVal = radius.value,
arcBoolean = arcBox.checked,
styleVal = style.options[style.selectedIndex].value,
alphaVal = alpha.value,
sideIndentVal = sideIndent.value;
if (numVal < 3) {
alert("Please enter a number larger than 2!");
return;
}
if (rVal <= 0) {
alert("Please enter a number of radius larger than 0!");
return;
}
if (sideIndentVal < 0 || sideIndentVal > 1) {
alert("Please enter a number of sideIndent 0 ~ 1 !");
return;
}
ctx.clearRect(0, 0, w, h);
if (styleVal === 'fill') {
drawFillStarPolygon(ctx, xCenter, yCenter, rVal, numVal, sideIndentVal, alphaVal, arcBoolean);
}
if (styleVal === 'stroke') {
drawStrokeStarPolygon(ctx, xCenter, yCenter, rVal, numVal, sideIndentVal, alphaVal, arcBoolean);
}
}
function drawStarPolygons(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc) {
var sideIndentRadius = radius * (sideIndent || 1);
var radAngle = alpha ? alpha * Math.PI / 180 : -Math.PI / 2;
var radAlpha = Math.PI * 2 / sides / 2;
ctx.save();
ctx.beginPath();
var xPos = xCenter + Math.cos(radAngle) * radius;
var yPos = yCenter + Math.sin(radAngle) * radius;
ctx.moveTo(xPos, yPos);
for (var i = 1; i <= sides * 2; i++) {
var rad = radAlpha * i + radAngle;
var len = (i % 2) ? sideIndentRadius : radius;
var xPos = xCenter + Math.cos(rad) * len;
var yPos = yCenter + Math.sin(rad) * len;
ctx.lineTo(xPos, yPos);
}
ctx.closePath();
}
function drawFillStarPolygon(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc) {
drawStarPolygons(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc);
ctx.fill();
if (arc) {
ctx.beginPath();
ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, true);
ctx.arc(xCenter, yCenter, radius * sideIndent, 0, 2 * Math.PI, true);
ctx.stroke();
}
}
function drawStrokeStarPolygon(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc) {
drawStarPolygons(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc);
ctx.stroke();
}
function drawScreen() {
ctx.fillStyle = '#f36';
ctx.strokeStyle = '#df0';
}
drawScreen();
}
script>
