canvas绘制简单五子棋棋盘

最新推荐文章于 2023-04-16 15:51:36 发布

原创最新推荐文章于 2023-04-16 15:51:36 发布 · 5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#canvans

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素及JavaScript实现一个简单的五子棋棋盘绘制过程。从获取Canvas元素到创建绘图上下文，再到绘制网格线，详细解析每个步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 canvas

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

Canvas（画布）简介

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

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

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

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

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

本例所用知识点：

首先，找到 <canvas> 元素:

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() 方法来绘制线条

附上完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
<style type="text/css">
.chessboard{
    display:block;
    margin:50px auto;
}
</style>

<script>
     function drawChessBoard () {
            var c=document.getElementById("mycanvas");
                context=c.getContext("2d");
                context.fillRect(15,435,15,435);
                for(var i = 0; i < 15; i++){
                    context.moveTo(15 + i * 30 , 15);
                    context.lineTo(15 + i * 30 , 435);
                    //垂直方向画15根，相距30px
                    context.stroke();
                    context.moveTo(15 , 15 + i * 30);
                    context.lineTo(435 , 15 + i * 30); 
                    //水平方向画15根，相距30px
                    context.stroke();
                }
            }
         
</script>
</head>
<body onload="drawChessBoard()">
	<canvas id="mycanvas" width="450px" height="450px"class="chessboard"></canvas>
	
</body>
</html>