js实现任意两点之间画虚线

最新推荐文章于 2024-08-09 06:00:00 发布

原创最新推荐文章于 2024-08-09 06:00:00 发布 · 7.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #canvas #web

java web 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API绘制复杂网格的方法。通过自定义函数实现不同方向的虚线绘制，适用于创建交互式视觉效果。文章详细解释了如何根据坐标变化调整线条绘制逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//*************************** 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;
	}
}