HTML 基本范例

示例

该canvas元素是在HTML5中引入的，用于绘制图形。

<canvas id="myCanvas">
   Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>

上面将创建一个<canvas>大小为300×150 px的透明HTML元素。

您可以使用canvas元素使用JavaScript绘制令人惊奇的东西，例如形状，图形，操纵图像，创建引人入胜的游戏等。
所述canvas的2D绘制层表面对象被称为CanvasRenderingContext2D; 或HTMLCanvasElement使用.getContext("2d")方法：

var ctx = document.getElementById("myCanvas").getContext("2d");
// 现在我们可以使用`ctx`来引用画布的2D层上下文

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x，y，宽度，高度

ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // 文字，x，y

jsFiddle示例