erb body pat begin -c ext 效果图 str 利用
项目所在地址:https://gitee.com/zixiao520/h5WuZiQi/tree/master
CSS与js都采用内联式
1.创建canvas :html代码部分
- <!DOCTYPE html>
- <html>
- <head>
- <meta content="text/html; charset=utf-8" />
- <title>
- </title>
- <style type="text/css">
- body { margin: 10px; }
- </head>
- <body>
- <div>
- <canvas width="640" id="canvas" height="640">
- </canvas>
- </div>
- </body>
- </html>
2.css部分:
- <style type="text/css">
- body {
- margin: 10px;
- }
- div {
- text-align:center;
- }
- canvas{
- background-color:cornflowerblue;
- }
- </style>
3.js部分:利用canvas技术画出棋盘,并导入棋子
- <script type="text/javascript">
- var canvas;
- var context;
- var img_b = new Image();
- img_b.src = "b.png";
- var img_w = new Image();
- img_w.src = "w.png";
- function drawRect() {
- canvas = document.getElementById("canvas");
- context = canvas.getContext("2d");
- for (var i = 0; i <= 640; i += 40) {
- context.beginPath();
- context.moveTo(0, i);
- context.lineTo(640, i);
- context.closePath();
- context.stroke();
- context.beginPath();
- context.moveTo(i, 0);
- context.lineTo(i, 640);
- context.closePath();
- context.stroke();
- }
- }
- </script>
4.网页效果图:
结对-五子棋游戏-开发过程
来源: http://www.bubuko.com/infodetail-2338041.html