网格背景棋盘实现canvas
2018-07-04 11:03
106 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网格</title> <style> #chess { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef , 5px 5px 5px #b9b9b9; } #chess:hover{ cursor: pointer; } </style> <script type="text/javascript"> window.onload = function () { var chess = document.getElementById('chess'); var context = chess.getContext('2d'); function drawtable(){ for (var i = 0; i<15; i++){ for (var j = 0; j<15 ;j++){ //绘制横线 context.moveTo(15, 15 +j *30); context.lineTo(435, 15 +j *30); //绘制竖线 context.moveTo(15+j*30,15); context.lineTo(15+j*30,435); //使用灰色描边 context.strokeStyle = "#bfbfbf"; context.stroke(); } } }; drawtable(); }; </script> </head> <body> <canvas id="chess" width="450px" height="450px"></canvas> </body> </html>阅读更多
相关文章推荐
- 网格背景棋盘实现纯css
- 使用TiledLayer类及Canvas类实现游戏背景图层
- 一款由html5 canvas实现五彩小圆圈背景特效
- linear-gradiend CSS实现网页背景网格效果
- canvas-简单快速实现知乎登录页背景效果
- H5 Canvas结合Arcgis JSAPI实现有背景的TextSymbol效果
- 一款由html5 canvas实现五彩小圆圈背景特效
- 安卓canvas实现拖动显示大背景图片
- 用Canvas可以实现很多特效,这里仅仅列出在Canvas上更改字体以及背景的方法。
- canvas实现背景连线
- 【实例】html5-canvas中实现背景图片的移动
- 【实例】html5-canvas中实现背景图片的移动
- 用canvas实现html网页的动画背景
- canvas-简单快速实现知乎登录页背景效果
- canvas简单快速的实现知乎登录页背景效果
- 纯js与canvas实现心电图网格绘制
- HTML5 Canvas 视差滚动背景的OOP实现
- canvas 实现网格
- canvas实现流星雨的背景效果
- 用Canvas可以实现很多特效,这里仅仅列出在Canvas上更改字体以及背景的方法。