HTML5 canvas画布画直线

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

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

效果展示

一、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()
    }