JavaScript编写人机对战五子棋(三)

来源：互联网发布：淘宝字体侵权扣分吗编辑：程序博客网时间：2024/05/01 03:25

绘制背景图...

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>五子棋</title><link rel="stylesheet" href="css/chess.css" /></head><body><canvas id="chess" width="450px" height="450px"></canvas><script type="text/javascript" src="js/chess.js" ></script><script type="text/javascript">window.onload = start();</script></body></html>

//获取canvas对象var chess = document.getElementById('chess');//获取canvas上下文var ctx = chess.getContext('2d');//背景图var back = new Image();back.src = "img/back.jpg"//绘制棋盘function drawChessBoard(context){back.onload = function(){context.drawImage(back,0,0,450,450);for (var i=0;i<15;i++) {context.strokeStyle = 'black'context.beginPath()context.moveTo(15+i*30,15)context.lineTo(15+i*30,435)context.stroke()context.beginPath()context.moveTo(15,15+i*30)context.lineTo(435,15+i*30)context.stroke()context.closePath();}}}//启动方法function start(){drawChessBoard(ctx)}

效果图如下：

0 0