课程目标：

1.绘制虚线的步骤是怎么样的？
2.绘制虚线需要用到什么canvas方法？
3.虚线的变换？

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

android 绘制虚线 手绘虚线_android绘制虚线

第一步：先拿到canvas对象.

android 绘制虚线 手绘虚线_2d_02

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

android 绘制虚线 手绘虚线_2d_03

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

android 绘制虚线 手绘虚线_html_04

第三步：

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

第四步：

android 绘制虚线 手绘虚线_html_05


虚线的核心在这里。

第一步：先5px10px5px10px的重复着。效果：

android 绘制虚线 手绘虚线_2d_06


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

第三步：

android 绘制虚线 手绘虚线_android绘制虚线_07


负数为左移。正数为右移。

第五步：连起来。

android 绘制虚线 手绘虚线_html_08

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

android 绘制虚线 手绘虚线_android绘制虚线_09

3.虚线的变换？：

android 绘制虚线 手绘虚线_html_10


这样的话，是这样的。

android 绘制虚线 手绘虚线_android绘制虚线_11


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

以下代码：

<!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>

android 绘制虚线 手绘虚线_android绘制虚线_12


android 绘制虚线 手绘虚线_android绘制虚线_13

<!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>

android 绘制虚线 手绘虚线_2d_14

android 绘制虚线 手绘虚线_html_15