标签：can draw round ast ntb 游戏 doctype pat utf-8
项目所在地址：https://gitee.com/zixiao520/h5WuZiQi/tree/master
css与js都采用内联式
1.创建canvas :html代码部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 body { 8 margin: 10px; 9 } 10 11 </head> 12 <body > 13 <div> 14 <canvas width="640" id="canvas" height="640"> 15 </canvas> 16 </div> 17 18 </body> 19 </html>
2.css部分：
<style type="text/css"> body { margin: 10px; } div { text-align:center; } canvas{ background-color:cornflowerblue; } </style>
3.js部分：利用canvas技术画出棋盘，并导入棋子
1 <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.网页效果图：
标签：can draw round ast ntb 游戏 doctype pat utf-8
原文地址：http://www.cnblogs.com/zixiao520/p/7629907.html
