//*************************** html ******************************************
<body>
<canvas id="canvas">
您的浏览器不支持canvas
</canvas>
</body>
//*************************** js *******************************************
var canvasWidth = Math.min( 800 , $(window).width() - 20 )
//var canvasWidth = 550;
var canvasHeight = canvasWidth;
var canvas = document.getElementById("canvas"); //得到canvas
var context = canvas.getContext("2d"); //获取上下文绘图环境
function drawGrid() {
context.save(); //保存最原始的状态
context.strokeStyle = "rgb(230,11,9)"; //线条为红颜色
context.beginPath(); //开始一个新的路径
context.moveTo(0, 0); //移动到0, 0的位置
context.lineTo(canvasWidth, 0); //连接到右上角 此时画笔在右上角
context.lineTo(canvasWidth, canvasHeight); //连接到右下角
context.lineTo(0, canvasHeight);
context.closePath();
context.lineWidth = 6;
context.stroke();
context.beginPath();
xuxian(0, 0, canvasWidth, canvasHeight);
//context.moveTo(0, 0)
//context.lineTo(canvasWidth, canvasHeight)
// xuxian(0, 0, 100, 30)
// xuxian(0, 0, 30, 100)
//xuxian(300, 60, 30, 100)
xuxian(canvasWidth, 0, 0, canvasHeight);
//context.moveTo(canvasWidth, 0)
//context.lineTo(0, canvasHeight)
xuxian(canvasWidth / 2, 0, canvasWidth / 2, canvasHeight);
//context.moveTo(canvasWidth / 2, 0)
//context.lineTo(canvasWidth / 2, canvasHeight)
xuxian(0, canvasHeight / 2, canvasWidth, canvasHeight / 2);
//context.moveTo(0, canvasHeight / 2)
//context.lineTo(canvasWidth, canvasHeight / 2)
context.lineWidth = 1;
context.stroke();
context.restore(); //恢复开始的状态
}
function xuxian(startW, startH, endW, endH) {
if (startW <= endW && startH <= endH) {
youxia(startW, startH, endW, endH);
} else if (startW < endW && startH > endH) {
youshang(startW, startH, endW, endH);
} else if (startW > endW && startH > endH) {
youxia(endW, endH, startW, startH);
} else if (startW > endW && startH < endH) {
youshang(endW, endH, startW, startH);
}
}
//起始点在左下角
function youshang(startW, startH, endW, endH) {
w = endW - startW; // 起止点横坐标之差
h = startH - endH; //起点减终点 纵坐标之差
//每 n 像素分一段,按比例缩放根据。
//w h长的一边为n像素分段,短的一边按两边的比例缩放
//确定每次前进的量
if (w >= h) {
if (w != 0)
w = 2;
if (h != 0 && w != 0)
h = (h * w) / (endW - startW);
if (h != 0 && w == 0)
h = 2;
} else {
// w = w / 100
if (h != 0)
h = 2;
if (h != 0 && w != 0)
w = (h * w) / (endH - startH);
if (h == 0 && w != 0)
w = 2;
// h = h / 100
}
// 根据前进量绘图
for (i = startW, j = startH; ; ) {
context.moveTo(i, j);
if (i + w <= endW && j - h >= endH)
context.lineTo(i + w, j - h);
else if (i + w < endW && j - h < endH)
context.lineTo(i + w, endH);
else if (i + w > endW && j - h > endH)
context.lineTo(endW, j + h);
else
context.lineTo(endW, endH);
i += 2 * w;
j -= 2 * h;
if ((i > endW && j < endH) || (w == 0 && j < endH) || (h == 0 && i > endW) || (h == 0 && w == 0))
break;
else if (i > endW && j > endH)
i = endW;
else if (i < endW && j < endH)
j = endH;
}
}
//从左上角向右下角画
function youxia(startW, startH, endW, endH) {
w = endW - startW; //起始点横坐标之差
h = endH - startH; //起止点纵坐标之差
//每 n 像素分一段,按比例缩放根据。
//w h长的一边为n像素分段,短的一边按两边的比例缩放
//确定每次前进的量
if (w >= h) {
if (w != 0)
w = 2;
if (h != 0 && w != 0)
h = (h * w) / (endW - startW);
if (h != 0 && w == 0)
h = 2;
} else {
if (h != 0)
h = 2;
if (h != 0 && w != 0)
w = (h * w) / (endH - startH);
if (h == 0 && w != 0)
w = 2;
}
// 根据前进量绘图
for (i = startW, j = startH; ; ) {
context.moveTo(i, j);
if (i + w <= endW && j + h <= endH)
context.lineTo(i + w, j + h);
else if (i + w < endW && j + h > endH)
context.lineTo(i + w, endH);
else if (i + w > endW && j + h < endH)
context.lineTo(endW, j + h);
else
context.lineTo(endW, endH);
i += 2 * w;
j += 2 * h;
if ((i > endW && j > endH) || (w == 0 && j > endH) || (h == 0 && i > endW) || (h == 0 && w == 0))
break;
else if (i > endW && j < endH)
i = endW;
else if (i < endW && j > endH)
j = endH;
}
}