标签：9.png close code lin net line script 分享 span
1.项目所在地址：https://gitee.com/g961231/WuZiQi/commits/master
2.CSS和JS都采用内联式
3.创建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>
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.网页显示的效果
标签：9.png close code lin net line script 分享 span
原文地址：http://www.cnblogs.com/guo961231/p/7630158.html
