canvas案例：绘制虚线

贵哥的编程之路

发布于 2021-03-17 09:32:58

1.6K00

代码可运行

文章被收录于专栏：用户7873631的专栏用户7873631的专栏

运行总次数：0

代码可运行

1.绘制虚线的步骤是怎么样的（JS）？

第一步：先拿到canvas对象.

第二步：通过getContext方法拿到另一个对象

因为这另一个对象才能画图.

第三步：

第一步：先画一个点moveTo。 第二步：再画另一个点lineTo。 第三步：再想另一个点的宽度如何。 第四步：再想想连起来的时候的颜色如何。

第四步：

虚线的核心在这里。 第一步：先5px10px5px10px的重复着。效果：

第二步：getLineDash是获取重复之前的那段的. 第三步：

负数为左移。正数为右移。 第五步：连起来。

2.绘制虚线需要用到什么核心canvas方法？

3.虚线的变换？：

这样的话，是这样的。

代表和两个参数是相反的。并且是有无有无的进行着的.

以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		*{padding: 0px;margin: 0px;}
	</style>
</head>
<body>
	<canvas  width="500" height="500"></canvas>
	<script>
		let q=document.querySelector("canvas");
		let w=q.getContext("2d");
		w.moveTo(100,100);
		w.lineTo(400,100);
		w.lineWidth=30;
		w.strokeStyle="red";
		w.setLineDash([5,10]);
		console.log(w.getLineDash());
		w.lineDashOffset=-50;
		w.stroke();
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		*{padding: 0px;margin: 0px;}
	</style>
</head>
<body>
	<canvas  width="500" height="500"></canvas>
	<script>
		let q=document.querySelector("canvas");
		let w=q.getContext("2d");
		w.moveTo(100,100);
		w.lineTo(400,100);
		w.lineWidth=30;
		w.strokeStyle="red";
		w.setLineDash([5,10,20]);
		console.log(w.getLineDash());
		w.lineDashOffset=-50;
		w.stroke();
	</script>
</body>
</html>