HTML5 Canvas制作数独游戏（一）

初次接触Canvas，想做一个数独游戏，查找资料后开始着手实现。途中也遇到几个难点，也都克服了，实现了一个简单的版本，就想把过程写下来。水平有限，代码可能也有不完善的地方。
好了，废话不多说，现在开始。
Canvas使用，不需要任何插件之类的，就仅仅是HTML5支持的一个标签，所以第一步，就是写一个简单的HTML页面代码，并加入一个canvas标签。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>canvas数独</title>
</head>
<body><canvas id="canA" width="540" height="540" style="border: 2px green solid;"></canvas>
</body>
</html>

这就加了一个canvas画布，当然这里显示的边框是不需要的，只是为了看下效果。一般添加一个透明的画布即可，长宽也可以在js代码中设置。
为了美观，这里将画布设为居中显示，左右居中即可。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>canvas数独</title><style type="text/css">#canA {display:block;margin:0 auto;border:2px green solid;}</style>
</head>
<body><canvas id="canA" width="540" height="540"></canvas>
</body>
</html>

接下来就开始绘制九宫格了。玩过数独的人都知道，数独是一个9×9的格子，其行、列及9个3×3的格子均存在1-9数字，不能重复也不能少。这里当然就使用canvas绘制了。
先绘制9×9格子的边框，直接使用canvas绘制矩形方法。这里就可以将css样式中边框去掉了，只显示绘制出来的边框。（后面再贴完整代码）

let penA = canA.getContext('2d');// 2d指定了二维绘图
penA.lineWidth = 4;//设置线宽
penA.strokeStyle = "rgba(65, 105, 225, 0.7)";//设置颜色及透明度
penA.strokeRect(2, 2, 536, 536);//最外矩形框

这样就能得到一个蓝色粗线边框。接下来绘制中间的两条横线和两条竖线，就使用最简单的点对点画线。先画2条横线。

penA.beginPath();//开始
penA.moveTo(2, 180);//第一条线起点
penA.lineTo(538, 180);//第一条线终点
penA.moveTo(2, 360);//第二条线起点
penA.lineTo(538, 360);//第二条线终点
penA.closePath();//结束
penA.stroke();//绘制

同理可以画出两条竖线。

penA.beginPath();
penA.moveTo(180, 2);
penA.lineTo(180, 538);
penA.moveTo(360, 2);
penA.lineTo(360, 538);
penA.closePath();
penA.stroke();

运行后，效果如下。

剩下的线都换成细线，还是使用点对点的方式。

penA.lineWidth = 2;
penA.strokeStyle = "rgba(65, 105, 225, 0.3)";
penA.beginPath();
for(let i = 1; i <= 8; i++){//算上中间两条实线，一共8条线if(i%3 != 0){//第3/6条不需要画，是粗线//横向8条penA.moveTo(2, 60*i);penA.lineTo(538, 60*i);//纵向8条penA.moveTo(60*i, 2);penA.lineTo(60*i, 538);}
}
penA.closePath();
penA.stroke();

运行后，效果如下。

本篇到此结束。下一篇再讲解如何将数字绘制上去。
本次完整代码如下(整理后的)。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>canvas数独</title><style type="text/css">#canA {display:block;margin:0 auto;}</style>
</head>
<body><canvas id="canA" width="540" height="540"></canvas><script>function drawLineA(pen, w, h){//画边框粗线var lineW = pen.lineWidth;//线宽pen.strokeRect(lineW/2, lineW/2, w-lineW, h-lineW);//最外矩形框//横向两条粗线pen.beginPath();pen.moveTo(lineW/2, h/3);pen.lineTo(w-lineW, h/3);pen.moveTo(lineW/2, h/3*2);pen.lineTo(w-lineW, h/3*2);pen.closePath();pen.stroke();//纵向两条粗线pen.beginPath();pen.moveTo(w/3, lineW/2);pen.lineTo(w/3, h-lineW);pen.moveTo(w/3*2, lineW/2);pen.lineTo(w/3*2, h-lineW);pen.closePath();pen.stroke();}function drawLineB(pen, w, h){//画边框细线var lineW = pen.lineWidth;//线宽pen.beginPath();for(let i = 1; i <= 8; i++){//算上中间两条实线，一共8条线if(i%3 != 0){//第3/6条不需要画//横向8条pen.moveTo(lineW/2, h/9*i);pen.lineTo(w-lineW, h/9*i);//纵向8条pen.moveTo(w/9*i, lineW/2);pen.lineTo(w/9*i, h-lineW);}}pen.closePath();pen.stroke();}</script><script>let myA = document.getElementById("canA");let w = myA.width;let h = myA.height;let penA = canA.getContext('2d');// 2d指定了二维绘图penA.lineWidth = 4;//设置线宽penA.strokeStyle = "rgba(65, 105, 225, 0.7)";//设置颜色及透明度drawLineA(penA, w, h);//画边框粗线penA.lineWidth = 2;penA.strokeStyle = "rgba(65, 105, 225, 0.3)";drawLineB(penA, w, h);//画边框细线</script>
</body>
</html>

HTML5 Canvas制作数独游戏（一）相关推荐

HTML5 Canvas制作数独游戏（三）
上篇已经实现了点选后给予显示,本篇就开始讲解如何往数独中填入数字.这里使用的是在数独右边区域展示1-9数字,选择数字后自动填入. 那这1-9数字也得画出来,那就需要第3块画布了.添加标签如下(当然这里 ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
HTML5+canvas激流勇进网页游戏源码
介绍: HTML5+canvas激流勇进网页游戏,游戏玩法:使用左键.右键和上箭头键移动. 网盘下载地址: http://kekewangLuo.cc/qn9O6AvpNW10 图片:
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
html5怎么做出旋转效果,HTML5+Canvas制作的幻彩旋转圆盘特效
HTML5+Canvas制作的幻彩旋转圆盘特效 body { background: #000; color: #aaa; font: 100%/20px helvetica; } canvas { ...
使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
怎样用HTML5 Canvas制作一个简单的游戏
为了让大家清楚HTML5制作游戏的简单流程,所以先了制作一个非常简单的游戏,来看一看这个过程. 游戏非常简单,无非就是英雄抓住怪物就得分,然后游戏重新开始,怪物出现在地图的随机位置,英雄初始化在地 ...

HTML5 Canvas制作数独游戏（一）

HTML5 Canvas制作数独游戏（一）相关推荐

最新文章

热门文章