JS五子棋界面设计用到的知识点

1. HTML DOM getContext() 方法

定义和用法：
getContext() 方法返回一个用于在画布上绘图的环境。

JavaScript 语法： Canvas.getContext(contextID)

参数：参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 “3d” 字符串参数。

返回值： 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

2. HTML canvas stroke() 方法

定义和用法:
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色

JavaScript 语法： context.stroke();

3. HTML canvas beginPath() 方法

定义和用法:
beginPath() 方法开始一条路径，或重置当前的路径。

提示1：请使用这些方法来创建路径
moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。
提示2：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法： context.beginPath();

4. HTML canvas moveTo() 方法

定义和用法:
moveTo() 方法把路径移动到画布中的指定点，不创建线条。

JavaScript 语法： context.moveTo(x,y);

提示：请使用 stroke() 方法在画布上绘确切的路径。

参数	描述
x	路径的目标位置的 x 坐标。
y	路径的目标位置的 y坐标。

5. HTML canvas strokeStyle 属性

定义和用法： strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

默认值： #000000

JavaScript 语法： context.strokeStyle=color|gradient|pattern;

属性值

值	描述
color	指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性 或 放射性）。
pattern	用于创建 pattern 笔触的 pattern 对象

6. HTML canvas createRadialGradient() 方法

定义和用法：
createLinearGradient() 方法创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。 提示：请使用 addColorStop()
方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法： context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
r0	开始圆的半径
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标
r1	结束圆的半径

7. HTML canvas addColorStop() 方法

定义和用法： addColorStop() 方法规定 gradient 对象中的颜色和位置。 addColorStop() 方法与createLinearGradient() 或 createRadialGradient() 一起使用。

注释：您可以多次调用 addColorStop() 方法来改变渐变。如果您不对 gradient 对象使用该方法，那么渐变将不可见。

JavaScript 语法：gradient.addColorStop(stop,color);

参数值

参数	描述
stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color	在结束位置显示的 CSS 颜色值

8. HTML canvas fill() 方法

定义和用法： fill() 方法填充当前的图像（路径）。默认颜色是黑色。 提示：请使用 fillStyle 属性来填充另一种颜色/渐变。
注释：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

JavaScript 语法： context.fill();

9. HTML canvas arc() 方法

定义和用法： arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为
2*Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

JavaScript 语法： context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径
rsAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise 可选	规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针

10. HTML canvas drawImage() 方法

定义和用法： drawImage() 方法在画布上绘制图像、画布或视频。 drawImage()方法也能够绘制图像的某些部分，或者增加或减少图像的尺寸。

JavaScript 语法 1 在画布上定位图像： context.drawImage(img,x,y);

JavaScript 语法 2 在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);

JavaScript 语法 3 剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

**

动动小手自己尝试一下！(具体实现代码JS实现五子棋界面设计
**

All is well!