es2017 draw ges lin mage func img 所在 blue
1.项目所在地址:https://gitee.com/g961231/WuZiQi/commits/master
2.CSS和JS都采用内联式
3.创建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>
4.编写css部分
- <style type="text/css">
- body {
- margin: 10px;
- }
- div {
- text-align:center;
- }
- canvas{
- background-color:cornflowerblue;
- }
- </style>
5.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>
6.网页显示的效果
结对编程-五子棋游戏-开发过程
来源: http://www.bubuko.com/infodetail-2338195.html