canvas象棋 画图

今天写了一个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*8this.height= 450;          //棋盘高度 50*9this.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)}//画上部分Xthis.drawLine(p+c*3,p,p+c*5,p+c*2);this.drawLine(p+c*5,p,p+c*3,p+c*2);//画下部分Xthis.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>

posted on 2017-02-19 22:40 Viven张 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/vivenZ/p/6417642.html

canvas象棋 画图相关推荐

  1. canvas 在线画图

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

  2. html canvas php,HTML5 canvas实现画图程序（附代码）

    这篇文章给大家介绍的内容是关于HTML5 canvas实现画图程序(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 项目简介 整个项目分为两大部分场景 场景负责canvas控 ...

  3. 表格、表单、HTML标记语言以及使用canvas来画图 input新属性

    三  内容大纲 今天讲的内容大致为表格.表单.HTML标记语言以及使用canvas来画图,表格中用table标签来书写,其中包含tr.th.td元素来构建表格,还可使用colspan来进行行合并,用r ...

  4. 基于html+JS实现canvas简易画图工具

    使用canvas来创建区域,建立核心对象,再接着分别获取几个按钮的节点,确定鼠标按下的起始位置,和鼠标释放时的位置,并为其加上移动事件,鼠标松开时则删除移动节点.点击清除画布按钮,使用clearRec ...

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

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

  6. 用html5 canvas画猪头,使用HTML5 Canvas实现画图效果

    使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 效果演示 您的浏览器不支持canvas! ...

  7. html5 canvas 制作画图工具。

    html5比起之前最大的进步之一,就是引入了canvas标签.canvas 顾名思义,是个画布,我们可以通过脚本语言(javascript),来操作canvas,画出各种各样的图案. 既然是画布,那就 ...

  8. html canvas 随意画图,html5 canvas 画图的问题

    一共三个问题 : 1. change()函数是1秒钟执行一次,当中的console 语句也应该是每秒输出一次,但在本地执行发现,每次的console语句被执行情况    为什么会这样 2. 怎样在每次 ...

  9. 微信小程序（canvas）画图保存到本地相册（wepy）

    html标签部分 因为这个需要用户授权 所以需要使用button,画布使用的是canvas,这个可以参考小程序官方文档,代码如下 <button class='btn' type="d ...

最新文章

  1. c语言随机生成int64_t类型的数据_手把手教你代码生成（上）：MATLAB代码生成
  2. tf.summary.FileWriter
  3. 运维经验分享（三）-- 解决Ubuntu下crontab不能正确执行脚本的问题
  4. C++中lib和dll解析
  5. mysql中in的使用
  6. Jedis问题解决方案大全:No more cluster attempts left
  7. VS2012打开项目 提示Asp.net4.0未在web服务器上注册的解决方案
  8. 手推公式+项目实操复现！《机器学习》完整详解
  9. 扫描二维码后可以自动跳转到网页
  10. java ajaxsubmit_jQuery 使用 ajaxSubmit() 提交表单实现方法
  11. cad字体安装_拿了CAD字体不知道怎么装？看过来
  12. jmu-Java-03面向对象-06-继承覆盖综合练习-Person、Student、Employee、Company
  13. 从菜鸟到架构师（六）
  14. linux系统下载18.04,在Ubuntu 18.04系统中下载安装Persepolis Download Manager
  15. java面试所问到的问题和资料整理
  16. Power BI 通过Treatas函数自由切换坐标轴
  17. JS获取网页大小和鼠标当前坐标
  18. 安卓手机反应慢又卡怎么办_手机反应慢怎么办？轻松让你的安卓手机提速50%
  19. android官方上拉加载,Android-RecycleView上拉加载更多
  20. 【机器学习】Java 代码实现 CART 决策树算法

热门文章

  1. 修改最低版本minSdkVersion（转）
  2. 明晰软件架构与数据结构
  3. 解读谷歌事件中的失语症现象
  4. 病毒式营销案例：多芬让“病毒”的诱惑自发传递
  5. shandong‘s approach for doing thing
  6. C++风格与C风格文件读写效率测试-vs2015,vs2017
  7. （九）2005年我的第一次软件行业创业，烧掉30万、2年时间打水漂的惨痛教训
  8. 在场景中加入第一人称视角运行后一直往下掉的解决方案
  9. 解决ubuntukylin 13.10安装wine时无法解决软件包依赖问题
  10. Linux监控   Nagios