刚发完就发现有这样的问题  是width和height样式要和视频里一样写在<canvas>标签里

<canvas id="chess" width="450px" height="450px">

你好，
你这个应该是上面那句 element 获取有问题，你用的是 getElementsByTagName，得到的是一个数组，如果是只有一个元素，那下面那句context 获取就应该是 chess[0].getContext('2d')。

现在可以了，原来要这样写

<canvas id="five" width="450px" height="450px"></canvas>

宽和高要写在标签里面而不是样式

就是创建一个二维的绘图环境，2d就是二维，也可以说是一个画板。

粘贴出来代码看看

moveTo,lineTo就是确定一个线段的起、止坐标点啊。例如画第一条竖线，坐标是（15,15）到（435,435），没问题吧？ 因为棋盘总长宽都是450，然后上下左右都有15px的内边距(留白)，所以上坐标就是那样的。其他的坐标是是分别+30.因为每个格子宽高都是30像素。你用笔自己画画就知道了。

兄弟，你的代码里面

context,moveTo(15 + i*30 , 15);//context后面是逗号

context.lineTo(15 + i*30 , 435);

context.stroke();

context,moveTo(15 , 15 + i*30);//context后面是逗号

context.lineTo(435 , 15 + i*30);

context.stroke();

你自己数数context后面用了几个句号...你这种图怕是阴差阳错画出了高级canvas函数图喔。

sublime

我也碰上了这个问题

原因是box-shadow不兼容浏览器ie浏览器，在w3c上看到的，换成  -webkit-box-shadow: 3px 3px 2px #888;就好了

链接的JS文件也要写在canvas标签内部可以。

var chess = document.getElementById('chees');  id取错了，是chess

圆的画法  重新试试试试

context.beginPath();

context.arc(15+i*30,15+j*30,13,0,2*Math.PI);

context.closePath();

var gradient=context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);

获取画布的2D空间，2d是指画布的空间

不是很理解你的问题。在这个案例里格子之间的间距是为了达到让界面美观才选定的30，如果调整了整个棋盘的大小，就应该重新计算格子的大小啊。

(width - 2*15) / 14

宽度设置错了，起点和终点一样了。。。。

楼上正解，我就是Id的d大写了

把错误信息贴出来呀

我也出现这种问题，id检查了也没有出错

stroke()放在后面，当你的路线设计好之后，在进行绘画，而不是一出来就绘画

你代码没问题啊，是不是引用有问题啊

https://www.cnblogs.com/q460021417/p/5122524.html

这里有问题出现原因的介绍....

解决方法概括来讲就是你把起点终点坐标的整数+0.5就行了

我是说里面用js画的的格子线，这是我的截图，下图我将box-shdow去掉了还是这样。明显右下角很淡，感觉从左到右、从上到下，逐渐变淡。怎么解释？？？

你要让文档加载后才加载js  如果放在头部就在window。onload=function（）{代码都放这里}

要么把js放在canvas后  让canvas创建了才画图

 绘制 2d 的对象，你可以在外面加载一个windows onload=function(){

        //内容

}这样就能解决问题了

script别放头部，在body里引用。