夜_陌飞
2016-03-26 10:09
var chess=document.getElementById('chess');
var context=chess.getContext('2d');
context.strokeStyle="#bfbfbf";
var logo=new Image();
logo.src="images/慕课图标.png";
logo.onload=function(){
context.drawImage(logo,0,0,450,450);
drawChessBoard();
context.beginPath();
context.arc(200,200,100,0,2*Math.PI);
context.closePath();
context.fill();
}
var drawChessBoard=function(){
for (var i = 0; i < 15; i++) {
context.moveTo(15+i*30,15);
context.lineTo(15+i*30,435);
context.stroke();
context.moveTo(15,15+i*30);
context.lineTo(435,15+i*30);
context.stroke();
}
}
我照代码敲的 就是图片跟棋子都出不来效果
确认你的浏览器是否支持HTML5,IE使用IE9以上版本
确认你的canvas id="chess"
javascript代码添加到html最后
可以使用JavaScript调试工具(例如FireBug),看下是不是有JavaScript错误
JS实现人机大战之五子棋(UI篇)
35650 学习 · 136 问题
相似问题