Canvas 基础教程 - Canvas 基础教程 - 简单教程，简单编程

<canvas> 是一个 HTML 元素，它同时也是一个画板，可以使用脚本 (通常为 JavaScript ) 来绘制图形

本篇教程描述了如何使用从一些基础开始，使用 <canvas> 元素来绘制 2D 图形

教程中提供的例子，可以让我们明白可以使用 canvas 做什么

Canvas 简单范例

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="200" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

运行结果如下

是不是很简单

几行代码，就创建了一个 <canvas> 元素，并在上面绘制了一个 150x75 的红色的矩形

暂时不用去费劲理解每一行代码啥意思，后面我们会一一说明