canvas案例：绘制虚线

最新推荐文章于 2024-01-11 00:00:00 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-01-11 00:00:00 发布

阅读量5.6k

点赞数 3

分类专栏： canvas（打造你的强大基础的文章）

本文链接：https://blog.csdn.net/qq_37805832/article/details/114810632

版权

canvas（打造你的强大基础的文章）专栏收录该内容

7 篇文章 0 订阅

订阅专栏

课程目标：

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

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>

在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas案例：绘制虚线

<!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>
复制链接

扫一扫