早就想学java script来着,最近刚好有些时间,就开始折腾了下,做了些小实验。 <html> <body> <p><b> JavaScript Test </b></p> <canvas id = "graph" width = "400" height = "400" /> <mce:script type="text/javascript"><!-- var graph = document.getElementById("graph"); if(typeof graph.getContext != "undifined") { var context = graph.getContext("2d"); var width = graph.getAttribute("width"); var height = graph.getAttribute("height"); context.fillStyle = "#0066CC"; context.fillRect( 100, 100, width - 200, height - 200 ); context.clearRect( 150, 150, width - 300, height - 300 ); context.strokeRect( 0, 0, width, height ); context.strokeStyle = "#FF0000"; context.beginPath(); context.moveTo(0, 0); context.lineTo(width, height); context.moveTo(width, 0); context.lineTo(0, height); context.stroke(); context.closePath(); // draw a circle context.fillStyle = "rgba(0, 255, 0, 0.5)"; context.beginPath(); var centerX = width / 2; var centerY = height / 2; var radius = 50; context.moveTo(centerX + radius, centerY); context.arc( centerX, centerY, radius, 0, 2.0 * Math.PI, true); context.fill(); context.closePath(); } // --></mce:script> </body> </html> 另外还做了个简单的平行坐标图,代码稍微有些长,就只贴张图好啦。