HTML5 canvas画布画直线

最新推荐文章于 2023-08-03 08:24:58 发布

wywar

最新推荐文章于 2023-08-03 08:24:58 发布

阅读量521

点赞数

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/zhouweihua138/article/details/129679061

版权

文章介绍了如何在HTML5的canvas元素中利用javascript的2dcontext进行直线的绘制。首先，在HTML页面添加canvas标签，并设置边框样式。然后，通过javascript获取canvas元素并得到2d绘图上下文，使用`moveTo`和`lineTo`方法定义线条的起点和终点，最后调用`stroke`方法绘制线条。示例代码展示了从单条直线到三角形和矩形的绘制过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用HTML5 canvas画布怎么画直线？

HTML5新元素之一 canvas，定义使用 JavaScript 的图像绘制，只需要简单几步就能用js在canvas中画图。

获取canvas标签
获取2d context
使用绘图api在context上进行绘图

效果展示

canvas画布画直线

一、Html页面添加canvas标签

在html页面声明canvas标签。

  <section>
    <h1>context.LineTo(x, y)</h1>
    <canvas id="canvas" width="200" height="150"></canvas>
    <canvas id="canvas2" width="200" height="150"></canvas>
    <canvas id="canvas3" width="200" height="150"></canvas>
    <canvas id="canvas4" width="200" height="150"></canvas>
    <canvas id="canvas5" width="200" height="150"></canvas>
  </section>

为了让canvas元素更直观地显示出来，我们加上边框样式

canvas {
  border:1px dashed gray;
}

二、页面javascript获取canvas，获取context，再在context上lineTo

	// 声明一个方法根据id获取dom元素
	function $$(id){
	  return document.getElementById(id)
	}
	// 页面加载完成开始执行方法
	window.onload = function() {
	    // 画1条直线
	    var cnv = $$('canvas') // 获取canvas
	    var ctx = cnv.getContext('2d') // 获取canvas的 2d context 2d绘图上下文
	    // console.log(ctx)
	    ctx.moveTo(50, 100) // 移动到坐标点x轴50, y轴100
	    ctx.lineTo(150, 50) // 在坐标(150,50)和上一个坐标(50, 100)用直线连接起来
	    ctx.stroke() // 描边绘制，默认stroke样式为黑色
	
	    // 画2条直线
	    var cnv2 = $$('canvas2')
	    var ctx2 = cnv2.getContext('2d')
	
	    ctx2.moveTo(50, 50)
	    ctx2.lineTo(100, 50)
	    ctx2.moveTo(50, 100)
	    ctx2.lineTo(100, 100)
	    ctx2.stroke()
	
	    // 画2条直线改动moveTo为lineTo变成3条直线
	    var cnv3 = $$('canvas3')
	    var ctx3 = cnv3.getContext('2d')
	
	    ctx3.moveTo(50, 50)
	    ctx3.lineTo(100, 50)
	    ctx3.lineTo(50, 100) // 把上面的moveTo改为lineTo
	    ctx3.lineTo(100, 100)
	    ctx3.stroke()
	
	    // 画三角形: 不在同一直线上的3个点用直线连起来就是三角形
	    var cnv4 = $$('canvas4')
	    var ctx4 = cnv4.getContext('2d')
	
	    ctx4.moveTo(50, 100)
	    ctx4.lineTo(150, 50) // 确定三个顶点坐标
	    ctx4.lineTo(150, 100)
	    ctx4.lineTo(50, 100)
	    ctx4.stroke()
	
	
	    // 画矩形：4个顶点坐标即可确定一个矩形
	    var cnv5 = $$('canvas5')
	    var ctx5 = cnv5.getContext('2d')
	
	    ctx5.moveTo(50, 50)
	    ctx5.lineTo(150, 50) // 确定4个顶点坐标
	    ctx5.lineTo(150, 100)
	    ctx5.lineTo(50, 100)
	    ctx5.lineTo(50, 50)
	    ctx5.stroke()
    }