sublime text editor
<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><head></head><body style="font-family:'lucida grande', tahoma, verdana, arial, sans-serif;background-color: #f7f7f7;color: #333;"><img id="spacebg" src="http://my.csdn.net/uploads/201207/02/1341222679_9916.jpg" style="display:none" /><canvas id="canvas" width="660" height="510" style="border:1px dotted;float:left"></canvas><br><form action="action_page.php">inner radius (cm):<br><input type="text" id="innerR" value="15"><br>outer radius (cm):<br><input type="text" id="outerR" value="105"><br>skirt part angle (degree):<br><input type="text" id="angleInput" value="180"><br>cloth width (cm):<br><input type="text" id="widthInput" value="140"><br>cloth length (cm):<br><input type="text" id="lengthInput" value="500"><br>start with half part:<input type="checkbox" name="startWithHalfCb" checked="checked" id="cb1"><br><br><span>Total usage:</span> <span id="usage">0</span><br> <span>Unit usage:</span> <span id="unitUsage">0</span> <br> <span>Half parts:</span> <span id="halfParts">0</span> <br><br><br><!-- <input type="submit" value="Submit" onclick="start()"> --></form> <input type="button" value="start" onclick="start()" id="startBtn" /><script>var r1 = 90;var r2 = 20;var angle = 180;var width = 140;var len = 500;var angleBeta = (180 - angle) / 2;var d1, d2, stepLen, eLen;var skirtPartArea;var startWithHalf = true;var halfCount = 0;function drawSkirtPart(ctx, x, y, startRadian, endRadian) { ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r1, startRadian, endRadian, false); ctx.fillStyle="#009900"; ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r2, startRadian, endRadian, false); ctx.fillStyle="white"; ctx.closePath(); ctx.fill();}function initParams () { r1 = parseInt(document.getElementById("outerR").value); r2 = parseInt(document.getElementById("innerR").value); angle = parseInt(document.getElementById("angleInput").value); width = parseInt(document.getElementById("widthInput").value); len = parseInt(document.getElementById("lengthInput").value); var cbs = document.getElementsByName('startWithHalfCb'); for(var i=0;i<cbs.length;i++){ startWithHalf = cbs[i].checked; } angleBeta = (180 - angle) / 2;}function draw() { var canvas = document.getElementById("canvas"); if (canvas == null) { return; } var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 600, 600); ctx.strokeRect(0, 0, len, width); if (halfCount == 0) { return; } var start1 = degreeToRadian(angleBeta); var end1 = degreeToRadian(angleBeta + angle); var count = halfCount; if (startWithHalf) { drawSkirtPart(ctx, 0, -d1, start1, Math.PI / 2); count--; var drawDown = true; for (var i=1; count > 0; count -= 2) { if (count > 1) { if (drawDown) { drawSkirtPart(ctx, stepLen * i, width + d1, start1 + Math.PI, end1 + Math.PI); } else { drawSkirtPart(ctx, stepLen * i, -d1, start1, end1); } } else { if (drawDown) { drawSkirtPart(ctx, stepLen * i, width + d1, start1 + Math.PI, Math.PI * 1.5); } else { drawSkirtPart(ctx, stepLen * i, -d1, Math.PI / 2, end1); } } drawDown = !drawDown; i++; } } else { if (halfCount > 1) { drawSkirtPart(ctx, eLen, -d1, start1, end1); count -= 2; } else { drawSkirtPart(ctx, eLen, -d1, Math.PI / 2, end1); count--; } var drawDown = true; for (var i=1; count > 0; count -= 2) { if (count > 1) { if (drawDown) { drawSkirtPart(ctx, stepLen * i + eLen, width + d1, start1 + Math.PI, end1 + Math.PI); } else { drawSkirtPart(ctx, stepLen * i + eLen, -d1, start1, end1); } } else { if (drawDown) { drawSkirtPart(ctx, stepLen * i + eLen, width + d1, start1 + Math.PI, Math.PI * 1.5); } else { drawSkirtPart(ctx, stepLen * i + eLen, -d1, Math.PI / 2, end1); } } drawDown = !drawDown; i++; } }}function start() { initParams (); d1 = r2 * Math.sin(degreeToRadian(angleBeta)); d2 = width + 2 * d1; var hypotenuse = 2 * r1; eLen = r1 * Math.sin(degreeToRadian( angle/2 )); var totalArea = width * len; stepLen = Math.sqrt(hypotenuse*hypotenuse - d2 * d2); var minStepLen = r1 * Math.cos(angleBeta); if (stepLen < minStepLen) { stepLen = minStepLen; } skirtPartArea = Math.PI * (r1 * r1 - r2 * r2) * (angle / 360); // alert("stepLen: " + stepLen + ", eLen: " + eLen); if (startWithHalf) { halfCount = getHalfPartsCount(len, stepLen, eLen); } else { halfCount = getHalfPartsCount(len - eLen, stepLen, eLen); halfCount ++; } var usagePercent = (skirtPartArea * halfCount / 2) / totalArea; var unitUsage = skirtPartArea / (width * stepLen); // alert("unitUsage: " + unitUsage + ", usagePercent: " + usagePercent + ", halfCount: " + halfCount); document.getElementById("unitUsage").innerHTML = unitUsage; document.getElementById("usage").innerHTML = usagePercent; document.getElementById("halfParts").innerHTML = halfCount; draw();}function degreeToRadian(degree) { return (degree / 180) * Math.PI;}function getHalfPartsCount(length, stepLength, halfPartWidth) { // if (stepLength < halfPartWidth) { // return 0; // } var c = parseInt(length / stepLength); var remain = length - c * stepLength; var halfCount = c * 2; if (remain >= halfPartWidth) { halfCount ++; } return halfCount;}// window.onload=init;</script></body></html>新聞熱點(diǎn)
疑難解答
圖片精選
