结对-五子棋游戏-开发过程

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"> 
 2         var canvas; 
 3         var context; 
 4         var img_b = new Image(); 
 5         img_b.src = "b.png";
 6         var img_w = new Image(); 
 7         img_w.src = "w.png";
 8         function drawRect() {
 9             canvas = document.getElementById("canvas"); 
10             context = canvas.getContext("2d"); 
11   
12             for (var i = 0; i <= 640; i += 40) {
13                 context.beginPath(); 
14                 context.moveTo(0, i); 
15                 context.lineTo(640, i); 
16                 context.closePath(); 
17                 context.stroke(); 
18   
19                 context.beginPath(); 
20                 context.moveTo(i, 0); 
21                 context.lineTo(i, 640); 
22                 context.closePath(); 
23                 context.stroke(); 
24             } 
25         } 
26         
27     </script> 
     4.

 



posted @ 2017-10-31 20:22  樱花花  Views(142)  Comments(0)    收藏  举报