计算几何考场绘图技巧

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

posted @ 2015-03-28 23:54 mhy12345 阅读(315) 评论(0) 收藏举报

刷新页面返回顶部