display.php-n=22-13&f=22-13.html
来自「javascript 5 随书源码 javascript」· HTML 代码 · 共 274 行
HTML
274 行
<html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Keywords" name="Keywords"content="JavaScript, examples, JavaScript: The Definitive Guide"><title>Example 22-13 from JavaScript: The Definitive Guide, Fifth Edition</title><style>body { font-family: arial, sans-serif}.lefttitle { font: bold x-small arial, sans-serif; margin: 5px; letter-spacing: .15em; text-transform:uppercase;}.leftcaption { font: italic x-small sans-serif; margin-bottom: 20px;}#banner { font-family:sans-serif; color:#333; font-size:x-large; font-weight:normal; padding:15px; padding-top: 3px; border-bottom:4px double #666;}#banner h1 { font-size: x-large; margin: 0px; padding: 0px;}#banner .description { font-size:large; margin-left: 2px;}pre { border: solid black 1px; background-color: #ddd; padding: 10px; margin: 0px;} </style></script></head><body><div id="banner"><h1>davidflanagan.com/javascript5</h1><span class="description">Example 22-13 from<i>JavaScript: The Definitive Guide, Fifth Edition</i></span></div><div style="float: left; text-align: center; width:200px; margin-right:20px"><div class="lefttitle">Buy The Book</div><iframe src="../../rcm.amazon.com/e/cm-t=davidflanagancom&o=1&p=8&l=as1&asins=0596101996&fc1=000000&IS2=1<1=_blank&lc1=0000ff&bc1=000000&bg1=ffffff&f=ifr" tppabs="http://rcm.amazon.com/e/cm?t=davidflanagancom&o=1&p=8&l=as1&asins=0596101996&fc1=000000&IS2=1<1=_blank&lc1=0000ff&bc1=000000&bg1=ffffff&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><div class="leftcaption">This example is posted here for the convenienceof my readers.</div><div class="lefttitle">Tip the Author</div><form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_s-xclick"><input type="image" src="../../www.paypal.com/en_US/i/btn/x-click-but21.gif" tppabs="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"><img alt="" border="0" src="../../www.paypal.com/en_US/i/scr/pixel.gif" tppabs="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----"></form><div class="leftcaption">Found a helpful example, but don't own the book?</div><div class="lefttitle">Advertising</div><script type="text/javascript"><!--google_ad_client = "pub-5162555666633441";google_alternate_color = "ffffff";google_ad_width = 160;google_ad_height = 600;google_ad_format = "160x600_as";google_ad_type = "text_image";google_ad_channel ="";//--></script><script type="text/javascript" src="../../pagead2.googlesyndication.com/pagead/show_ads.js" tppabs="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><div style="margin-left: 220px;"><div class="lefttitle" style="padding:0px; text-align: right"><a href="index.html" tppabs="http://www.davidflanagan.com/javascript5/index.html">Table of Examples</a></div><pre><html><head><script>// Embed a Flash canvas of the specified size, inserting it as the sole// child of the specified container element. For portability, this function// uses an <embed> tag in Netscape-style browsers and an <object> tag in others// Inspired by FlashObject from Geoff Stearns.// See http://blog.deconcept.com/flashobject/function insertCanvas(containerid, canvasid, width, height) { var container = document.getElementById(containerid); if (navigator.plugins && navigator.mimeTypes&&navigator.mimeTypes.length){ container.innerHTML = "<embed src='Canvas.swf' type='application/x-shockwave-flash' " + "width='" + width + "' height='" + height + "' bgcolor='#ffffff' " + "id='" + canvasid + "' name='" + canvasid + "'>"; } else { container.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' "+ "width='" + width + "' height='" + height + "' id='"+ canvasid + "'>" + " <param name='movie' value='Canvas.swf'>" + " <param name='bgcolor' value='#ffffff'>" + "</object>"; }}// The Flash drawing API is lower-level than others, with only a simple // bezier-curve primitive. This method draws a pie wedge using that API.// Note that angles must be specified in radians.function wedge(canvas, cx, cy, r, startangle, endangle, color) { // Figure out the starting point of the wedge var x1 = cx + r*Math.sin(startangle); var y1 = cy - r*Math.cos(startangle); canvas.beginFill(color, 100); // Fill with specified color, fully opaque canvas.moveTo(cx, cy); // Move to center of circle canvas.lineTo(x1, y1); // Draw a line to the edge of the circle // Now break the arc into pieces < 45 degrees and draw each // with a separate call to the nested arc() method while(startangle < endangle) { var theta; if (endangle-startangle > Math.PI/4) theta = startangle+Math.PI/4; else theta = endangle; arc(canvas,cx,cy,r,startangle,theta); startangle += Math.PI/4; } canvas.lineTo(cx, cy); // Finish with a line back to the center canvas.endFill(); // Fill the wedge we've outlined // This nested function draws a portion of a circle using a Bezier curve. // endangle-startangle must be <= 45 degrees // The current point must already be at the startangle point. // You can take this on faith if you don't understand the math. function arc(canvas, cx, cy, r, startangle, endangle) { // Compute end point of the curve var x2 = cx + r*Math.sin(endangle); var y2 = cy - r*Math.cos(endangle); var theta = (endangle - startangle)/2; // This is the distance from the center to the control point var l = r/Math.cos(theta); // angle from center to control point is: var alpha = (startangle + endangle)/2; // Compute the control point for the curve var controlX = cx + l * Math.sin(alpha); var controlY = cy - l * Math.cos(alpha); // Now call the Flash drawing API to draw the arc as a Bezier curve. canvas.curveTo(controlX, controlY, x2, y2); }}/** * Draw a pie chart in the Flash canvas specified by element or id. * data is an array of numbers: each number corresponds to a wedge of the chart * The pie chart is centered at (cx, cy) and has radius r. * The colors of the wedges are Flash color values in the colors[] array. * A legend appears at (lx,ly) to associate the labels in the labels[] * array with each of the colors. */function pieChart(canvas, data, cx, cy, r, colors, labels, lx, ly) { // Get the canvas if specified by id if (typeof canvas == "string") canvas = document.getElementById(canvas); // All the lines we draw are 2 pixels wide, black, and 100% opaque. canvas.lineStyle(2, 0x000000, 100); // Figure out the total of the data values var total = 0; for(var i = 0; i < data.length; i++) total += data[i]; // And compute the angle (in radians) for each one. var angles = [] for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2; // Now, loop through the wedges of the pie startangle = 0; for(var i = 0; i < data.length; i++) { // This is the angle where the wedge ends var endangle = startangle + angles[i]; // Draw a wedge: this function is defined earlier wedge(canvas, cx, cy, r, startangle, endangle, colors[i]); // The next wedge starts where this one ends. startangle = endangle; // Draw a box for the legend canvas.beginFill(colors[i], 100); canvas.moveTo(lx, ly+30*i); canvas.lineTo(lx+20, ly+30*i); canvas.lineTo(lx+20, ly+30*i+20); canvas.lineTo(lx, ly+30*i+20); canvas.lineTo(lx, ly+30*i); canvas.endFill(); // Add text next to the box canvas.addText(labels[i], lx+30, ly+i*30, 100, 20, // Text and position i, // each text field must have a different depth "Helvetica", 16); // Font info }}// When the document loads, insert a Flash canvas and draw on it// Note that colors in Flash are integers instead of stringswindow.onload = function() { insertCanvas("placeholder", "canvas", 600, 400); pieChart("canvas", [12, 23, 34, 45], 200, 200, 150, [0xff0000, 0x0000ff, 0xffff00, 0x00ff00], ["North", "South", "East", "West"], 400, 100);}</script></head><body><div id="placeholder"></div></body></html></pre><div class="lefttitle" style="padding:0px; text-align: right"><a href="index.html" tppabs="http://www.davidflanagan.com/javascript5/index.html">Table of Examples</a></div><p><script type="text/javascript">amazon_ad_tag="davidflanagancom"; amazon_ad_width="300"; amazon_ad_height="250"; amazon_ad_logo="hide";</script><script type="text/javascript" src="../../www.assoc-amazon.com/s/ads.js" tppabs="http://www.assoc-amazon.com/s/ads.js"></script></div></body></html>⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?