计算几何很多人在考场上拍出错了，但是根本不知道错在哪里，如果考场上能有一个类似于几何画板的东西那定是极好的。然后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中定义的函数，这样就是一个简单的的自制绘图工具了。对于那些手速几百字每分钟的，这点程序估计一分钟就打完了。
时间： 2024-10-23 12:20:07