今天写了一个canvas画图的象棋 。js基础不行，只画了个图，以后补充。。。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>chess</title>
  6.     <style>
  7.         canvas{
  8.             display: block;
  9.             margin:50px auto;
  10.             border:1px solid #EAC591;
  11.             border-radius: 20px;
  12.             box-shadow:2px 2px 30px  #080808;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <canvas id="canvas" width="460" height="510"></canvas>
  18. <script>
  19.     var chess = {}
  20.     chess.init = function () {
  21.         //获取上下文
  22.         var canvas = document.getElementById("canvas");
  23.         this.ctx = canvas.getContext("2d");
  24.         //初始化
  25.         this.padding= 30;         //预留外边框的空隙
  26.         this.cell= 50;              //棋盘空隙
  27.         this.chessRadius= 20;       //棋子半径
  28.         this.fontSize= 36;          //棋子文字大小
  29.         this.width=400;            //棋盘的宽度 50*8
  30.         this.height= 450;          //棋盘高度 50*9
  31.         this.offsetWidth = 460;
  32.         this.offsetHeight = 510;
  33.         this.array = [
  34.             ["车","马","相","士","将","士","相","马","车"],
  35.             [" "," "," "," "," "," "," "," "," "],
  36.             [" ","炮"," "," "," "," "," ","炮"," "],
  37.             ["兵"," ","兵"," ","兵"," ","兵"," ","兵"],
  38.             [" "," "," "," "," "," "," "," "," "],
  39.             [" "," "," "," "," "," "," "," "," "],
  40.             ["卒"," ","卒"," ","卒"," ","卒"," ","卒"],
  41.             [" ","炮"," "," "," "," "," ","炮"," "],
  42.             [" "," "," "," "," "," "," "," "," "],
  43.             ["車","馬","象","仕","帅","仕","象","馬","車"]
  44.  
  45.         ]
  46.         this.init_back();
  47.         this.init_piece();
  48.         this.addEvent();
  49.     }
  50.     //棋盘初始化
  51.     chess.init_back =function () {
  52.         var p = this.padding;
  53.         var c = this.cell;
  54.         var w = this.width;
  55.         var h = this.height;
  56.         var ow =this.offsetWidth;
  57.         var oh = this.offsetHeight;
  58.         this.drawBg(0,0,ow,oh);
  59.         //画横线
  60.         for(var i=0;i<=9;i++){
  61.             this.drawLine(p,p+c*i,p+w,p+c*i)
  62.         }
  63.         //画上半部分竖线
  64.         for(var i =0;i<=8;i++){
  65.             this.drawLine(p+c*i,p,p+c*i,p+c*4)
  66.         }
  67.         //画下半部分竖线
  68.         for(var i =0;i<=8;i++){
  69.             this.drawLine(p+c*i,p +c*5,p+c*i,p+c*9)
  70.         }
  71.         //画上部分X
  72.         this.drawLine(p+c*3,p,p+c*5,p+c*2);
  73.         this.drawLine(p+c*5,p,p+c*3,p+c*2);
  74.         //画下部分X
  75.         this.drawLine(p+c*3,p+h,p+c*5,p+c*7);
  76.         this.drawLine(p+c*5,p+h,p+c*3,p+c*7);
  77.         //画#标记点
  78.         this.drawRound(p+c,p+c*2);
  79.         this.drawRound(p+c*7,p+c*2);
  80.         this.drawRound(p+c,p+c*7);
  81.         this.drawRound(p+c*7,p+c*7);
  82.         for(var i =0;i<=9;i++){
  83.             if(i%2!=1){
  84.                 this.drawRound(p+c*i,p+c*3);
  85.                 this.drawRound(p+c*i,p+c*6);
  86.             }
  87.         }
  88.         //画楚河汉界
  89.         this.drawText(p+c*2,p+c*4.5,"楚 河");
  90.         this.drawText(p+c*6,p+c*4.5,"汉 界");
  91.  
  92.     }
  93.  
  94.     //棋子初始化
  95.     chess.init_piece = function () {
  96.         var p =this.padding;
  97.         var r = this.chessRadius;
  98.         var c = this.cell;
  99.         var a = this.array;
  100.         for(var i =0;i<a.length;i++){
  101.             for(var j=0;j<a[i].length;j++){
  102.                 if(a[i][j] !=" "){
  103.                     var t = a[i][j];
  104.                     this.drawPiece(p+c*j,p+c*i,r,t);
  105.                 }
  106.             }
  107.         }
  108.     }
  109.     //画背景
  110.     chess.drawBg =function (x,y,endX,endY) {
  111.         this.ctx.beginPath();
  112.         this.ctx.fillStyle = "#f9f9f9";
  113.         this.ctx.rect(x,y,endX,endY);
  114.         this.ctx.fill();
  115.         this.ctx.closePath();
  116.     }
  117.  
  118.     //画直线
  119.     chess.drawLine =function (x,y,endX,endY) {
  120.         this.ctx.beginPath();
  121.         this.ctx.lineWidth = 2;
  122.         this.ctx.strokeStyle = "#ff0000";
  123.         this.ctx.moveTo(x,y);
  124.         this.ctx.lineTo(endX,endY);
  125.         this.ctx.stroke();
  126.         this.ctx.closePath();
  127.     }
  128.  
  129.     //画标记点
  130.     chess.drawRound = function (x,y) {
  131.         var w = this.width;
  132.         var p = this.padding;
  133.         this.ctx.beginPath();
  134.         this.ctx.lineWidth = 2;
  135.         this.ctx.strokeStyle = "#ff0000";
  136.  
  137.         if(x!=p){
  138.             //左上
  139.             this.ctx.moveTo(x-5,y-10);
  140.             this.ctx.lineTo(x-5,y-5);
  141.             this.ctx.lineTo(x-10,y-5);
  142.             //左下
  143.             this.ctx.moveTo(x-5,y+10);
  144.             this.ctx.lineTo(x-5,y+5);
  145.             this.ctx.lineTo(x-10,y+5);
  146.         }
  147.         if(x!=p+w){
  148.             //右上
  149.             this.ctx.moveTo(x+5,y-10);
  150.             this.ctx.lineTo(x+5,y-5);
  151.             this.ctx.lineTo(x+10,y-5);
  152.             //右下
  153.             this.ctx.moveTo(x+5,y+10);
  154.             this.ctx.lineTo(x+5,y+5);
  155.             this.ctx.lineTo(x+10,y+5);
  156.  
  157.         }
  158.  
  159.         this.ctx.stroke();
  160.         this.ctx.closePath();
  161.     }
  162.  
  163.     //写字
  164.     chess.drawText = function (x,y,name) {
  165.         this.ctx.font="28px 隶书"
  166.         this.ctx.fillStyle="#000";
  167.         this.ctx.textAlign="center";
  168.         this.ctx.textBaseline="middle";
  169.         this.ctx.fillText(name, x, y);
  170.     }
  171.  
  172.     //画单个棋子
  173.     chess.drawPiece  =function (x,y,r,t) {
  174.         this.ctx.beginPath();
  175.         this.ctx.fillStyle = "#fff";
  176.         this.ctx.strokeStyle = "#ccc";
  177.         this.ctx.lineWidth =2;
  178.         this.ctx.arc(x,y,r,0,Math.PI*2,true);
  179.         this.ctx.fillText(t,x,y)
  180.         this.ctx.closePath();
  181.         this.ctx.fill();
  182.         this.ctx.stroke();
  183.         chess.drawText(x,y,t);
  184.  
  185.     }
  186.  
  187.     //画棋子的选中状态
  188.     chess.onPiece = function (x,y,r,t) {
  189.         this.ctx.beginPath();
  190.         this.ctx.strokeStyle ="#ff0000";
  191.         this.ctx.lineWidth =1;
  192.         this.ctx.moveTo(x-8,y-23);
  193.         this.ctx.lineTo(x-23,y-23);
  194.         this.ctx.lineTo(x-23,y-8);
  195.  
  196.         this.ctx.moveTo(x+8,y-23);
  197.         this.ctx.lineTo(x+23,y-23);
  198.         this.ctx.lineTo(x+23,y-8);
  199.  
  200.         this.ctx.moveTo(x-8,y+23);
  201.         this.ctx.lineTo(x-23,y+23);
  202.         this.ctx.lineTo(x-23,y+8);
  203.  
  204.         this.ctx.moveTo(x+8,y+23);
  205.         this.ctx.lineTo(x+23,y+23);
  206.         this.ctx.lineTo(x+23,y+8);
  207.  
  208.         this.ctx.stroke();
  209.         this.ctx.closePath();
  210.  
  211.         this.ctx.beginPath();
  212.         this.ctx.fillStyle = "#fff";
  213.         this.ctx.strokeStyle = "#ccc";
  214.         this.ctx.lineWidth =2;
  215.         this.ctx.arc(x,y,r,0,Math.PI*2,true);
  216.  
  217.         this.ctx.shadowOffsetX = 1; // 阴影Y轴偏移
  218.         this.ctx.shadowOffsetY = 1; // 阴影X轴偏移
  219.         this.ctx.shadowBlur = 4; // 模糊尺寸
  220.         this.ctx.shadowColor = 'rgba(0, 0, 0, 1)'; // 颜色
  221.         this.ctx.fillText(t,x,y)
  222.         this.ctx.closePath();
  223.         this.ctx.fill();
  224.         this.ctx.stroke();
  225.         chess.drawText(x,y,t);
  226.  
  227.     }
  228.  
  229.     //增加点击事件
  230.     chess.addEvent = function () {
  231.         var _this = this;
  232.         canvas.addEventListener("click",function (event) {
  233.             var k = _this.getMousePos(event);
  234.             console.log(Math.round(k.x))
  235.         });
  236.     }
  237.  
  238.     //获取鼠标点击坐标
  239.     chess.getMousePos = function(event) {
  240.         var dx = canvas.getBoundingClientRect().left;
  241.         var dy = canvas.getBoundingClientRect().top;
  242.         var e = event || window.event;
  243.         var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  244.         var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  245.         var x = e.pageX || e.clientX + scrollX;
  246.         var y = e.pageY || e.clientY + scrollY;
  247.         //alert('x: ' + x + '\ny: ' + y);
  248.         return { 'x': x-dx, 'y': y-dy };
  249.     }
  250.  
  251.     chess.init();
  252.  
  253. </script>
  254. </body>
  255. </html>

canvas象棋 画图的更多相关文章

  1. canvas 在线画图

    canvas 在线画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 使用Canvas制作画图工具

      前  言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制其每一个元素,并且canvas拥有多种的绘 ...

  3. 微信小程序 base64图片在canvas上画图

    上代码 wxml <canvas canvas-id="myCanvas" style="width:400px;height:400px;">&l ...

  4. html5 canvas 自定义画图裁剪图片

    html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...

  5. canvas基本画图

    <img src="img/lamp.gif" id="lamp"/> <img src="img/eg_tulip.jpg&quo ...

  6. HTML Canvas 鼠标画图

    原文来自:http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app(已被墙) 译文: http: ...

  7. canvas防画图工具

    <style> body {   background: black;   text-align: center; } #cans {   background: white; } < ...

  8. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  9. 兼容小程序的canvas画图组件jmGraph

    基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...

随机推荐

  1. Burpsuite 工具详解（常用模块之proxy、spider 、decoder）

    Burpsuite常用模块之proxy.spider .decoder                                                 是一款集成化渗透测试工具(jav ...

  2. 吴裕雄 python 神经网络——TensorFlow 自定义损失函数

    import tensorflow as tf from numpy.random import RandomState batch_size = 8 x = tf.placeholder(tf.fl ...

  3. 杭电2602 Bone Collector

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. 第十六节：Linq用法大全(四)

    1. OfType 获取集合中中指定类型元素. , , , , , "aaa", "bbb" }; int max = obj.OfType<int> ...

  5. Python 中的类与对象 初认识

    一:类的声明 1类的关键字: 从第一天第一个项目起我们就接触过关键字,比如False True is not None return for while elif else import等等,这是语言 ...

  6. 第六周之Hadoop学习（六）

    继续上周开启telnet的过程,这个过程发现win10上运行不了telnet的命令 原因大概在于没有开启telnet服务,从网上下载好telent服务端,安装后继续尝试是否能在win10上使用hado ...

  7. DCL和DQL

    数据查询语言(DQL,Data Query Language) 主要是一些查询的sql语句. 语法 select * from test: 数据控制语言(DCL, Data Control Langu ...

  8. kali安装vm tools正确操作

    参考博文:https://blog.csdn.net/qq_39536876/article/details/79501471 前言:每次在执行完 ./vmware-install.pl 重启后,总是 ...

  9. js--滑动块

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. c++拷贝构造函数（翁恺c++公开课[26-27]学习笔记）

    这节课在p26.拷贝构造中讲的很清楚,建议大家耐心的去看下. 什么时候会发生拷贝构造: 对象之间的初始化赋值 使用对象作为变量进行函数传参(通常使用引用来传参从而减去不必要的拷贝构造,提高效率和代码健 ...