HTML5 캔버스는 직선을 그립니다

HTML5의 새로운 요소 중 하나인 Canvas는 JavaScript를 이용한 이미지 그리기를 정의한 것으로, 몇 가지 간단한 단계만 거치면 캔버스에 js로 그림을 그릴 수 있습니다.

1. 캔버스 태그 가져오기
2. 2D 컨텍스트 가져오기
3. 그리기 API를 사용하여 컨텍스트에 그리기

결과 보여줘

1. HTML 페이지에 캔버스 태그 추가

html 페이지에서 캔버스 태그를 선언합니다.

  <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 {
    
    
  border:1px dashed gray;
}

2. 페이지 javascript는 캔버스를 가져오고 컨텍스트를 가져온 다음 컨텍스트에서 linesTo를 가져옵니다.

	// 声明一个方法根据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()
    }