您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

绘制折线

本小节我们学习如何绘制折线。

绘制线段上一小节我们已经学过了,利用 moveTolineTo 这三个就可以做到。 那我们如果要画一条折线怎么画呢?答案就是用多次 lineTo 就可以了。

先看整体案例:

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		
		ctx.();
	</script>
</body>
</html>

运行结果:

我们将上面的例子拆分讲解:

canvas 的渲染上下文。

const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');

将笔触移动到 (100, 100) 这个坐标点。

ctx.moveTo(100, 100)

路径绘制到 (200, 200) 这个点,再绘制到 (300, 100) 这个点,这里路径走势是从 (100, 100) 的起点连到 (200, 200) 这个点,然后从 (200, 200) 这个点再连到 (300, 100) 这个点。

ctx.lineTo(200, 200)
ctx.lineTo(300, 100)

开始描边。

ctx.()

到这里,我们就完成了一条折线的绘制。

本小节我们学习了如何绘制折线线段,下一节我们将学习如何绘制多条折线线段。


联系我
置顶