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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>chess</title>

    <style>

        canvas{

            display: block;

            margin:50px auto;

            border:1px solid #EAC591;

            border-radius: 20px;

            box-shadow:2px 2px 30px  #080808;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="460" height="510"></canvas>

<script>

    var chess = {}

    chess.init = function () {

        //获取上下文

        var canvas = document.getElementById("canvas");

        this.ctx = canvas.getContext("2d");

        //初始化

        this.padding= 30;         //预留外边框的空隙

        this.cell= 50;              //棋盘空隙

        this.chessRadius= 20;       //棋子半径

        this.fontSize= 36;          //棋子文字大小

        this.width=400;            //棋盘的宽度 50*8

        this.height= 450;          //棋盘高度 50*9

        this.offsetWidth = 460;

        this.offsetHeight = 510;

        this.array = [

            ["车","马","相","士","将","士","相","马","车"],

            [" "," "," "," "," "," "," "," "," "],

            [" ","炮"," "," "," "," "," ","炮"," "],

            ["兵"," ","兵"," ","兵"," ","兵"," ","兵"],

            [" "," "," "," "," "," "," "," "," "],

            [" "," "," "," "," "," "," "," "," "],

            ["卒"," ","卒"," ","卒"," ","卒"," ","卒"],

            [" ","炮"," "," "," "," "," ","炮"," "],

            [" "," "," "," "," "," "," "," "," "],

            ["車","馬","象","仕","帅","仕","象","馬","車"]

        ]

        this.init_back();

        this.init_piece();

        this.addEvent();

    }

    //棋盘初始化

    chess.init_back =function () {

        var p = this.padding;

        var c = this.cell;

        var w = this.width;

        var h = this.height;

        var ow =this.offsetWidth;

        var oh = this.offsetHeight;

        this.drawBg(0,0,ow,oh);

        //画横线

        for(var i=0;i<=9;i++){

            this.drawLine(p,p+c*i,p+w,p+c*i)

        }

        //画上半部分竖线

        for(var i =0;i<=8;i++){

            this.drawLine(p+c*i,p,p+c*i,p+c*4)

        }

        //画下半部分竖线

        for(var i =0;i<=8;i++){

            this.drawLine(p+c*i,p +c*5,p+c*i,p+c*9)

        }

        //画上部分X

        this.drawLine(p+c*3,p,p+c*5,p+c*2);

        this.drawLine(p+c*5,p,p+c*3,p+c*2);

        //画下部分X

        this.drawLine(p+c*3,p+h,p+c*5,p+c*7);

        this.drawLine(p+c*5,p+h,p+c*3,p+c*7);

        //画#标记点

        this.drawRound(p+c,p+c*2);

        this.drawRound(p+c*7,p+c*2);

        this.drawRound(p+c,p+c*7);

        this.drawRound(p+c*7,p+c*7);

        for(var i =0;i<=9;i++){

            if(i%2!=1){

                this.drawRound(p+c*i,p+c*3);

                this.drawRound(p+c*i,p+c*6);

            }

        }

        //画楚河汉界

        this.drawText(p+c*2,p+c*4.5,"楚 河");

        this.drawText(p+c*6,p+c*4.5,"汉 界");

    }

    //棋子初始化

    chess.init_piece = function () {

        var p =this.padding;

        var r = this.chessRadius;

        var c = this.cell;

        var a = this.array;

        for(var i =0;i<a.length;i++){

            for(var j=0;j<a[i].length;j++){

                if(a[i][j] !=" "){

                    var t = a[i][j];

                    this.drawPiece(p+c*j,p+c*i,r,t);

                }

            }

        }

    }

    //画背景

    chess.drawBg =function (x,y,endX,endY) {

        this.ctx.beginPath();

        this.ctx.fillStyle = "#f9f9f9";

        this.ctx.rect(x,y,endX,endY);

        this.ctx.fill();

        this.ctx.closePath();

    }

    //画直线

    chess.drawLine =function (x,y,endX,endY) {

        this.ctx.beginPath();

        this.ctx.lineWidth = 2;

        this.ctx.strokeStyle = "#ff0000";

        this.ctx.moveTo(x,y);

        this.ctx.lineTo(endX,endY);

        this.ctx.stroke();

        this.ctx.closePath();

    }

    //画标记点

    chess.drawRound = function (x,y) {

        var w = this.width;

        var p = this.padding;

        this.ctx.beginPath();

        this.ctx.lineWidth = 2;

        this.ctx.strokeStyle = "#ff0000";

        if(x!=p){

            //左上

            this.ctx.moveTo(x-5,y-10);

            this.ctx.lineTo(x-5,y-5);

            this.ctx.lineTo(x-10,y-5);

            //左下

            this.ctx.moveTo(x-5,y+10);

            this.ctx.lineTo(x-5,y+5);

            this.ctx.lineTo(x-10,y+5);

        }

        if(x!=p+w){

            //右上

            this.ctx.moveTo(x+5,y-10);

            this.ctx.lineTo(x+5,y-5);

            this.ctx.lineTo(x+10,y-5);

            //右下

            this.ctx.moveTo(x+5,y+10);

            this.ctx.lineTo(x+5,y+5);

            this.ctx.lineTo(x+10,y+5);

        }

        this.ctx.stroke();

        this.ctx.closePath();

    }

    //写字

    chess.drawText = function (x,y,name) {

        this.ctx.font="28px 隶书"

        this.ctx.fillStyle="#000";

        this.ctx.textAlign="center";

        this.ctx.textBaseline="middle";

        this.ctx.fillText(name, x, y);

    }

    //画单个棋子

    chess.drawPiece  =function (x,y,r,t) {

        this.ctx.beginPath();

        this.ctx.fillStyle = "#fff";

        this.ctx.strokeStyle = "#ccc";

        this.ctx.lineWidth =2;

        this.ctx.arc(x,y,r,0,Math.PI*2,true);

        this.ctx.fillText(t,x,y)

        this.ctx.closePath();

        this.ctx.fill();

        this.ctx.stroke();

        chess.drawText(x,y,t);

    }

    //画棋子的选中状态

    chess.onPiece = function (x,y,r,t) {

        this.ctx.beginPath();

        this.ctx.strokeStyle ="#ff0000";

        this.ctx.lineWidth =1;

        this.ctx.moveTo(x-8,y-23);

        this.ctx.lineTo(x-23,y-23);

        this.ctx.lineTo(x-23,y-8);

        this.ctx.moveTo(x+8,y-23);

        this.ctx.lineTo(x+23,y-23);

        this.ctx.lineTo(x+23,y-8);

        this.ctx.moveTo(x-8,y+23);

        this.ctx.lineTo(x-23,y+23);

        this.ctx.lineTo(x-23,y+8);

        this.ctx.moveTo(x+8,y+23);

        this.ctx.lineTo(x+23,y+23);

        this.ctx.lineTo(x+23,y+8);

        this.ctx.stroke();

        this.ctx.closePath();

        this.ctx.beginPath();

        this.ctx.fillStyle = "#fff";

        this.ctx.strokeStyle = "#ccc";

        this.ctx.lineWidth =2;

        this.ctx.arc(x,y,r,0,Math.PI*2,true);

        this.ctx.shadowOffsetX = 1; // 阴影Y轴偏移

        this.ctx.shadowOffsetY = 1; // 阴影X轴偏移

        this.ctx.shadowBlur = 4; // 模糊尺寸

        this.ctx.shadowColor = 'rgba(0, 0, 0, 1)'; // 颜色

        this.ctx.fillText(t,x,y)

        this.ctx.closePath();

        this.ctx.fill();

        this.ctx.stroke();

        chess.drawText(x,y,t);

    }

    //增加点击事件

    chess.addEvent = function () {

        var _this = this;

        canvas.addEventListener("click",function (event) {

            var k = _this.getMousePos(event);

            console.log(Math.round(k.x))

        });

    }

    //获取鼠标点击坐标

    chess.getMousePos = function(event) {

        var dx = canvas.getBoundingClientRect().left;

        var dy = canvas.getBoundingClientRect().top;

        var e = event || window.event;

        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;

        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;

        var x = e.pageX || e.clientX + scrollX;

        var y = e.pageY || e.clientY + scrollY;

        //alert('x: ' + x + '\ny: ' + y);

        return { 'x': x-dx, 'y': y-dy };

    }

    chess.init();

</script>

</body>

</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. websocket 无法查看Data

    websocket 是浏览器新的信息传输协议,记录一些遇到的问题: 调试相关: websocket 连接以后可以在Chrome tools 中的network下看到,如图 要查看通信内容可以选中点击f ...

  2. DL4J之CNN对今日头条文本分类

    一.数据集介绍 数据来源:今日头条客户端 数据格式如下: 6551700932705387022_!_101_!_news_culture_!_京城最值得你来场文化之旅的博物馆_!_保利集团,马未都, ...

  3. python：布尔类型

    bool:有两个值,True 和 False bool 其实是int类型的一个子类,True一般为1,False一般为0 判断前一个是否是后一个的子类:issubclass(A, B) 内建函数boo ...

  4. [总结]一些 DP 优化方法

    目录 注意本文未完结 写在前面 矩阵快速幂优化 前缀和优化 two-pointer 优化 决策单调性对一类 1D/1D DP 的优化 \(w(i,j)\) 只含 \(i\) 和 \(j\) 的项--单 ...

  5. Nginx正则及 Location匹配！

    1:Nginx location 规则匹配 ^~          标识符匹配后面跟一个字符串.匹配字符串后将停止对后续的正则表达式进行匹配. 如:location ^~ /images/,  在匹配 ...

  6. redis 基础 Redis 数据类型

    String(字符串) Hash(哈希) List(列表) Set(集合) zset(sorted set:有序集合)

  7. 【协作式原创】查漏补缺之乐观锁与悲观锁TODO

    面试官:你了解乐观锁和悲观锁吗? 乐观锁和悲观锁是两种思想,用于解决并发场景下的数据竞争问题. 悲观锁的实现方式是加锁,加锁既可以是对代码块加锁(如Java的synchronized关键字),也可以是 ...

  8. app生命周期之即将关闭

    需求:当软件正在进行任务还未结束时,如果用户强制退出软件,需要将一些数据进行保存等处理. 策略:当用户使用多任务将软件挂起,并滑掉软件时,接下来有5妙钟的时间留给软件做处理.会调用- (void)ap ...

  9. 关于java自学的内容以及感受

    这周主要学习了关于数组方面的知识包括一维数组以及多维数组(他们所储存数据默认值为0),以下为我根据相关知识编写的简单程序: public class test { public static void ...

  10. Lesson 16 The modern city

    What is the author's main argument about the modern city? In the organization of industrial life the ...