HTML5 Canvas入门

HTML部分：

<canvas id="canvas" width="800" height="600"></canvas>

 

JS部分：

// 获取画布元素
var canvas = document.getElementById("canvas");
// 获取绘图环境
var ctx = canvas.getContext("2d");

// 开始绘制路径
ctx.beginPath();
// 画个矩形，在坐标（400，300）位置，宽100，高50
ctx.rect(400, 300, 100, 50)
// 绘制到画布上
ctx.stroke();

 

canvas.getContext(type) 方法用于从画布上获取绘图环境（相当于获取一个工具类，包含各种绘图方法）。

type主要有两种： 

“2d” - 用于绘制二维图像

“webgl” - 用于绘制三维图像

 

canvas画布的坐标系：

原点（0，0）在canvas左上角

Demo:

https://codepen.io/winters-song/pen/oRejmp