标签：
计算几何很多人在考场上拍出错了，但是根本不知道错在哪里，如果考场上能有一个类似于几何画板的东西那定是极好的。然后hja就发现了浏览器这个高端大气上档次的绘图工具，没有任何平台差异，适用于任何考试，【唯一sad的地方时貌似有一些版本IE不支持】下面就来看一下这是怎么搞的。
我们通过html 5中的 canvas 标签，可以做到简单的绘图。
以下是绘图用的graph.html
<body> <script src="graph.js"></script> <canvas id="lalala"></canvas> <script> dPoint(0,0); </script> </body>
首先是一个简单的html程序，申请了一个id为lalala的canvas，并且调用了graph.js，不在html中内嵌javascript完全是因为那个鬼畜的配色方案。
在来看一下graph.js：
function dPoint(x,y) { x+=100,y+=100; var canvas=document.getElementById("lalala"); var ctx=canvas.getContext("2d"); ctx.fillStyle="#0000FF"; ctx.arc(x,y,3,0,Math.PI*2); ctx.fill(); } function dRect(x1,y1,x2,y2) { x1+=100,y1+=100;x2+=100,y2+=100; var canvas=document.getElementById("lalala"); var ctx=canvas.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(x1,y1,x2,y2); } function dLine(x1,y1,x2,y2) { x1+=100,y1+=100;x2+=100,y2+=100; var canvas=document.getElementById("lalala"); var ctx=canvas.getContext("2d"); ctx.fillStyle="#FFFF00"; ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); } function dTri(x1,y1,x2,y2,x3,y3) { dLine(x1,y1,x2,y2); dLine(x2,y2,x3,y3); dLine(x3,y3,x1,y1); }
这是我在做“三角形面积并”时写的，支持画点，画线，画三角形，首先，通过id得到canvas对象，然后申请一个2d画布【注意是"2d"不是"2D"】，然后就随便搞搞就行了，浏览器中y坐标是向下的，一个单位的长度很难辨认，如果看着不爽可以试试坐标变换。一个小技巧，多数浏览器使用审查元素那一类方法可以调出底部的调试框，里面有一个Console（控制台），我们可以在里边看到“编译错误”，也可以动态的调用javascript中定义的函数，这样就是一个简单的的自制绘图工具了。对于那些手速几百字每分钟的，这点程序估计一分钟就打完了。
标签：
原文地址：http://www.cnblogs.com/mhy12345/p/4375079.html
