html-canvas-绘制简单线条

最新推荐文章于 2023-11-18 14:11:47 发布

战神vs帝皇

最新推荐文章于 2023-11-18 14:11:47 发布

阅读量1.3k

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/ZhanShenvsDiHuang/article/details/124292803

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

canvas绘制线条用lineTo（x,y）方法，其中，x表示横向方向（向右为正）,y表示纵向方向（向下为正）

相关属性：

lineCap：该值告诉浏览器如何绘制线段的端点，可选值为以下三个之一：butt，round，square。默认为butt。
lineWidth：该值决定了线段的像素宽度。必须为非负，非无穷，默认为1.0。
lineJoin：决定了两条线段相交时如何绘制焦点，只有当两条线段方向不同时，才会生效。可取值：bevel，round，miter。默认值是miter。
miterLimit：告诉浏览器如何绘制miter形式的线段焦点，只有当lineJoin='miter’有效，默认为10.0。
lineDashOffset：设置虚线偏移量，默认为0.0。

相关方法：

beginPath：将当前路径之中的所有子路径都要清除掉，以此来重置当前路径。一般在绘制闭合图形时要先调用。
closePath ：显示的封闭某段路径。该方法用于封闭圆弧路径以及由曲线或线段所创建的开放路径。
moveTo：移动当前绘制点到指定的坐标。
lineTo：从上一个点绘制一条到指定坐标点的线段。
setLineDash：用来设置虚线的方法，参数是一个数组，表明绘制实线的长度，以及实线之间的间隙的长度。

例子：

<body>
	<canvas id="canvas1" width="600" height="600"></canvas>
	<script type="text/javascript">
		var canvas1 = document.querySelector("#canvas1")
		var ctx = canvas1.getContext('2d')
		//设置好开始路径
		ctx.beginPath()
		//设置绘制的起始点
		ctx.moveTo(50,60)
		//设置经过某个位置
		ctx.lineTo(50,300)
		ctx.lineTo(300,100)
		ctx.lineTo(300,250)
		//设置结束路径
		ctx.closePath()
		//设置线起始路径圆角
		ctx.lineCap = "round"
		//设置两条线相交时拐角为圆角
		ctx.miterLimit = 2
		ctx.lineJoin = "round"
		//绘制路径
		ctx.strokeStyle = "aqua"
		ctx.lineWidth = 10
		ctx.stroke()
		ctx.fillStyle = 'cadetblue'
		// ctx.fill()
	</script>
</body>