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*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象棋 画图的更多相关文章
- canvas 在线画图
canvas 在线画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 使用Canvas制作画图工具
前 言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制其每一个元素,并且canvas拥有多种的绘 ...
- 微信小程序 base64图片在canvas上画图
上代码 wxml <canvas canvas-id="myCanvas" style="width:400px;height:400px;">&l ...
- html5 canvas 自定义画图裁剪图片
html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...
- canvas基本画图
<img src="img/lamp.gif" id="lamp"/> <img src="img/eg_tulip.jpg&quo ...
- HTML Canvas 鼠标画图
原文来自:http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app(已被墙) 译文: http: ...
- canvas防画图工具
<style> body { background: black; text-align: center; } #cans { background: white; } < ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- 兼容小程序的canvas画图组件jmGraph
基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...
随机推荐
- list随机生成数值
List<int> numbers = Enumerable.Range(5, 10).ToList();
- Codeforces Round #620 (Div. 2) C. Air Conditioner
Gildong owns a bulgogi restaurant. The restaurant has a lot of customers, so many of them like to ma ...
- 02-11Android学习进度报告十一
今天我学习了BaseAdapter优化的知识,主要是View方面的优化. 首先是复用复用ConvertView 代码示例: @Override public View getView(int posi ...
- LNMP架构及应用部署!(重点)
LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构. WNMP代表的就是:Windows系统下Nginx+MySQL+PHP这种网站服务器架构. WAMP代表的就是: ...
- CircleLinkList(循环链表)
尾插法和循环链表. #include <stdio.h> #include <stdlib.h> typedef struct CircleLinkList { int dat ...
- VB.NET中Sub和Function的区别
function是函数,sub是子程序,都可以传递参数,但函数有返回值,子程序没有 function 可以用自身名字返回一个值,sub 需定义别的变量,用传址方式传回值. Sub 过程与Functio ...
- PTA的Python练习题(一)
最近宅家里没事干,顺便把python给学了.教程和书看了一段时间,但是缺少练习的平台. 想起大一时候练习C语言的PTA平台,就拿来练手了. (因为没有验证码无法提交题目,所以自己用pycharm来做题 ...
- python 基础文件操作
实时刷新到硬盘里 f= open('hh','w',encoding='utf8') f.write('gyftyftft') f.write('hghgh\njkkjk') f.flush()#实时 ...
- MySQL之正则
八:正则匹配: 语法: select * from 表名 where 字段名 regexp "正则表达式"; PS:MySQL中正则匹配,不能使用\w等字幕作为匹配
- GO测试
测试 Go拥有一个轻量级的测试框架,它由 go test 命令和 testing 包构成. 你可以通过创建一个名字以 _test.go 结尾的,包含名为 TestXXX 且签名为 func (t *t ...