canvas绘制简单五子棋棋盘

什么是 canvas

  是HTML5中用于图形的绘制的元素。 标签只是图形容器，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

---

Canvas（画布）简介

一个画布在网页中是一个矩形框，通过 元素来绘制.

注意: 默认情况下 元素没有边框和内容。

简单实例如下:

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

---

案例：绘制15*15的五子棋棋盘

本例所用知识点：

首先，找到 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

在Canvas上画线，我们将使用以下两种方法：

• moveTo(x,y) 定义线条开始坐标
• lineTo(x,y) 定义线条结束坐标
• stroke()   方法来绘制线条

附上完整代码：