绘制最简单的画布 - Kaiqisan

canvas绘制最简单的图形

画布的绘制过程全程使用JS代码。

关键代码

getContext('2d'): 创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。

moveTo(x, y): 移动画笔，创建一个初始坐标以便后面的绘图。

lineTo(x, y)：移动画笔，把画笔移动到当前所指坐标。

stroke(): 开始正式绘制，把之前画笔走过的所有的路径都画出来。

源码

window.onload = function () {
	// 获取画布标签
	let canvas = document.getElementById('demo')
	// 
	let ctx = canvas.getContext('2d')
	// 下面开始正式绘图
	ctx.moveTo(100, 100)  // 移动画笔
	ctx.lineTo(200, 100)
	ctx.lineTo(100, 200)  // 画笔从 200,100 到 100,200
	ctx.stroke()  // 开始描线
}

显示效果

**PS：**关于画布的坐标定位，它以右上角为零点，向左延伸为X轴正方向，向下延伸为Y轴正方向。