Javascript 如何使用画布更改此网格的尺寸？

我有以下坐标网格：jsfiddle.net/b6pwrca/29

例如，如何更改尺寸，使x轴从-7运行到7，y轴从-5运行到12

我在下面发布了我认为相关的代码：

function start(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = '#888';
ctx.lineWidth = 2;
ctx.fillStyle = "dark gray";
ctx.font = "15px Arial";
ctx.textAlign = "center";
ctx.textBaseline = 'bottom';
for(var i=1;i<size;i++){
ctx.moveTo(canvas.width/size/2*i, 0);
ctx.lineTo(canvas.width/size/2*i, canvas.height);
ctx.fillText("- "+        (sizei),canvas.width/size/2*i,canvas.height/50*30
);
    ctx.moveTo(canvas.width/2 + canvas.width/size/2*i, 0);
    ctx.lineTo(canvas.width/2 + canvas.width/size/2*i, canvas.height);
ctx.fillText("+ "+i,canvas.width/2 +     canvas.width/size/2*i,canvas.height/50*24);
}
    for(var i=1;i<size;i++){
ctx.moveTo(0, canvas.height/size/2*i);
ctx.lineTo(canvas.width, canvas.height/size/2*i);
ctx.fillText("+ "+(size-    i),canvas.width/50*27,canvas.height/size/2*i);
ctx.moveTo(0, canvas.height/2 + canvas.height/size/2*i);
ctx.lineTo(canvas.width, canvas.height/2 + canvas.height/size/2*i);
ctx.fillText("- "+i,canvas.width/50*27,canvas.height/2 + canvas.height/size/2*i);
}
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.moveTo(canvas.width/2, 0);
ctx.lineTo(canvas.width/2, canvas.height);
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width, canvas.height/2);
ctx.stroke();
ctx.closePath();



    for(var i=0;i<dots.length;i++){
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.lineWidth = 3;
var xc = canvas.width/2 + canvas.width/2/size*dots[i][0];
var yc = canvas.height/2 + canvas.height/2/size*(0-dots[i][1]);
ctx.arc(xc,yc,10,0,2*Math.PI);



ctx.fill();
ctx.closePath();
 }

}
window.onload = start();

函数开始（）{
canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
ctx.strokeStyle='#888'；
ctx.lineWidth=2；
ctx.fillStyle=“深灰色”；
ctx.font=“15px Arial”；
ctx.textAlign=“中心”；
ctx.textb基线='底部'；
对于（var i=1；i以下是如何绘制大小可调的网格


首先设置一些最小值和最大值：

var minX=-7;
var maxX=7;
var minY=-5;
var maxY=12;

计算网格中的线数

var vlines=maxX-minX;
var hlines=maxY-minY;

计算每个网格单元的宽度和高度

var cellwidth=canvasWidth/vlines;
var cellheight=canvasHeight/hlines;

现在可以像这样绘制网格线：

function drawGrid(){

    var midYY=midY*cellheight;
    var midXX=midX*cellwidth;

    ctx.font='12px verdana';
    ctx.lineWidth=1;
    ctx.globalAlpha=0.50;
    ctx.beginPath();

    // draw vertical X lines
    for(var n=1;n<vlines;n++){
        var x=parseInt(n*cellwidth);
        ctx.moveTo(x,0);
        ctx.lineTo(x,ch);
        if(n<vlines && minX+n!==0){ ctx.fillText(minX+n,x,midYY-cellheight/2); }
    }

    // draw horizontal Y lines
    for(var n=1;n<hlines;n++){
        var y=parseInt(n*cellheight);
        ctx.moveTo(0,y);
        ctx.lineTo(cw,y);
        if(n<hlines && maxY-n!==0){ ctx.fillText(maxY-n,midXX+cellwidth/2,y); }
    }
    ctx.stroke();
    ctx.globalAlpha=1.00;

    // draw darker origin lines
    ctx.beginPath();
    ctx.moveTo(midXX,0);
    ctx.lineTo(midXX,ch);
    ctx.moveTo(0,midYY);
    ctx.lineTo(cw,midYY);
    ctx.lineWidth=3;
    ctx.stroke();
}

您的代码似乎是家庭作业。您可能想尝试自己解决这个问题，作为一种学习体验。我投票将这个问题作为离题题来结束，因为这个问题和答案不太可能对未来的读者有所帮助。@markE这不是家庭作业……作为一个完全的初学者，我花了数小时的时间来修改先前存在的考试请直截了当。在对人做出负面假设之前，你可能想试着了解你在说什么。（我甚至都不属于学校……这就是为什么我需要问像这样有针对性的问题来学习…）抱歉！事实上，没有禁止在Stackoverflow上以问题的形式发布家庭作业——所以这里没有负面假设。：-）我仍然觉得你的问题有一个相对简单的解决方案，你会通过自己解决它学到更多。