canvas选择座位

PROMULGATOR

James

辽宁省大连市

← js原生弹幕

→ 仿安卓透渐变导航

相关代码

canvas选择座位

Html

Css

Js

* {
	margin:0;
	padding:0;
}
#cav {
	border:2px solid goldenrod;
}

var c = document.querySelector("#cav");
var ctx = c.getContext("2d");
ctx.beginPath();
for (var i = 1; i <= 15; i++) {
    var str = String(i);
    ctx.beginPath();
    ctx.font = "18px Arial";
    ctx.fillStyle = "darkgray";
    ctx.fillText(str, i * 30, 20);
    ctx.fillText(str, 10, i * 30 + 17);
    ctx.closePath();
    for (var j = 1; j <= 15; j++) {
        ctx.fillStyle = "green";
        ctx.fillRect(i * 30, j * 30, 25, 25);
        ctx.fill();
        ctx.stroke();
    }
}
ctx.closePath();
var arr = [];
c.onclick = function(e) {
    e = e || window.event;
    var x = parseInt((e.pageX - 30) / 30) + 1;
    var y = parseInt((e.pageY - 30) / 30) + 1;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].tranX == x && arr[i].tranY == y) {
            alert("您取消的座位:" + "横排:" + x + "竖排" + y);
            ctx.fillStyle = "green";
            ctx.fillRect(x * 30, y * 30, 25, 25);
            ctx.fill();
            ctx.stroke();
            arr.splice(i, 1);
            console.log(arr);
            return;
        }
    }
    var flag = {
        tranX: x,
        tranY: y
    };
    arr.push(flag);
    ctx.fillStyle = "yellow";
    ctx.fillRect(x * 30, y * 30, 25, 25);
    ctx.fill();
    ctx.stroke();
    alert("您选择的座位为:" + "横排:" + x + "竖排" + y);
    console.log(arr);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas选择座位



代码描述：canvas选择座位

用来随机挑选座位

1

最新

发表评论全部评论

暂时没有评论！

lxd0

2017/10/24 10:00:07

建议把alert放在setTimeout里。不然在chrome中alert会先执行，变色后执行。Firefox会先变色，后alert。
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas选择座位-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号