绘制最简单的画布

画布的绘制过程全程使用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,200ctx.stroke()  // 开始描线
}

显示效果

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