//*************************** 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; } }
js实现任意两点之间画虚线
最新推荐文章于 2023-10-24 09:39:23 发布