在页面上放置多个HTML5画布元素
我在HTML5中制作了一台节拍机 http://optiq-customtees.zxq.net/Beat_Machine_Sample.html
我需要弄清楚的是我如何分解不同的元素并将它们放在一起。我希望将屏幕和按钮作为单独的html5图纸放置在主框的顶部并进行交互，以便人们可以点击它们。
所以我想放置它 http://optiq-customtees.zxq.net/Beat_Machine_Box.html
然后把它放在角落里 http://optiq-customtees.zxq.net/Beat_Machine_Screen.html
然后将其分开16次 http://optiq-customtees.zxq.net/Beat_Machine_Button.html
我怎样才能做到这一点？提前谢谢。
1 个答案:
答案 0 :(得分：2)
如何将模型转变为工作区
您已经拥有绘制正文，屏幕和按钮的功能。
所以任务变成：
- 使按钮绘图代码可重复使用，以便轻松绘制所有12个按钮。
- 收听用户鼠标点击并报告按下了哪个按钮。
以下是完成这些任务的方法。
使用相同的按钮绘制功能绘制多个按钮
首先，您需要计算有关按钮绘图的一些基本信息：
// calculate button properties
var buttonOffsetX=44.9;
var buttonOffsetY=210.6;
var buttonWidth=139.4-44.9;
var buttonHeight=305.1-210.3;
var buttonPadding=15;
将按钮绘制放入函数中，使其可重复使用。
function drawOneButton(left,top) {
…draw one button at left/top
}
然后调用该函数并发送要绘制按钮的X / Y坐标：
// calculate where the button will go (left and top)
var leftX=buttonOffsetX+x*(buttonWidth+buttonPadding);
var topY=buttonOffsetY+y*(buttonHeight+buttonPadding);
// call on drawOneButton to draw a button
drawOneButton(leftX,topY);
全部放在一起......
这里的代码将使用循环绘制打击垫上的所有按钮：
// draw the 4x3 grid of buttons
for(var x=0;x<4;x++){
for(var y=0;y<3;y++){
drawOneButton(buttonOffsetX+x*(buttonWidth +buttonPadding),
buttonOffsetY+y*(buttonHeight+buttonPadding));
}
}
现在任务＃2 ......
收听用户鼠标点击并报告按下了哪个按钮
您可以使用jQuery监听用户点击您的打击垫时：
// listen when the use clicks the mouse
// when they do, call the function handleMouseDown
$("#canvas").mousedown(function(e){handleMouseDown(e);});
handleMouseDown函数计算并显示按下了哪个按钮：
var col=parseInt((mouseX-buttonOffsetX)/(buttonWidth+buttonPadding));
var row=parseInt((mouseY-buttonOffsetY)/(buttonHeight+buttonPadding));
所以把它们放在一起......
这是用户点击鼠标时调用的完整handleMouseDown函数：
- 计算鼠标位置（mouseX / mouseY）
- 计算哪个按钮位于该鼠标位置
-
报告按下了哪个按钮
function handleMouseDown(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousedown stuff here var col=parseInt((mouseX-buttonOffsetX)/(buttonWidth+buttonPadding)); var row=parseInt((mouseY-buttonOffsetY)/(buttonHeight+buttonPadding)); $("#row").html("Row: "+row); $("#col").html("Col: "+col); }
此按钮计算仅用于启动
您应该修改代码，以便在用户点击时忽略，但不会点击按钮。
当然，你必须编写代码来响应按下任何按钮。
这是代码和小提琴：http://jsfiddle.net/m1erickson/98ZgL/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:7px;}
#canvas{border:1px solid red;}
h3{font-size:2em;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
var col=parseInt((mouseX-buttonOffsetX)/(buttonWidth+buttonPadding));
var row=parseInt((mouseY-buttonOffsetY)/(buttonHeight+buttonPadding));
$("#row").html("Row: "+row);
$("#col").html("Col: "+col);
}
// calculate button properties
var buttonOffsetX=44.9;
var buttonOffsetY=210.6;
var buttonWidth=139.4-44.9;
var buttonHeight=305.1-210.3;
var buttonPadding=15;
// draw the gray background
drawBackground();
// draw the teal screen
drawScreen();
// draw the 4x3 grid of buttons
for(var x=0;x<4;x++){
for(var y=0;y<3;y++){
drawOneButton(buttonOffsetX+x*(buttonWidth+buttonPadding),buttonOffsetY+y*(buttonHeight+buttonPadding));
}
}
// listen for mousedown (when user presses a button)
$("#canvas").mousedown(function(e){handleMouseDown(e);});
function drawOneButton(left,top) {
// layer1/Path
ctx.save();
// translate to top-left where button will be placed
ctx.translate(left-44.9,top-210.6);
ctx.beginPath();
ctx.moveTo(138.2, 303.9);
ctx.lineTo(46.1, 303.9);
ctx.lineTo(46.1, 211.8);
ctx.lineTo(138.2, 211.8);
ctx.lineTo(138.2, 303.9);
ctx.closePath();
ctx.fillStyle = "rgb(0, 41, 118)";
ctx.fill();
// layer1/Path
ctx.beginPath();
ctx.moveTo(138.2, 303.9);
ctx.lineTo(46.1, 303.9);
ctx.lineTo(46.1, 211.8);
ctx.lineTo(50.5, 211.8);
ctx.lineTo(50.5, 299.6);
ctx.lineTo(138.2, 299.6);
ctx.lineTo(138.2, 303.9);
ctx.closePath();
ctx.fillStyle = "rgb(0, 16, 118)";
ctx.fill();
// layer1/Path
ctx.beginPath();
ctx.moveTo(46.1, 211.8);
ctx.lineTo(138.2, 211.8);
ctx.lineTo(138.2, 303.9);
ctx.lineTo(133.9, 299.6);
ctx.lineTo(133.9, 216.1);
ctx.lineTo(50.5, 216.1);
ctx.lineTo(46.1, 211.8);
ctx.closePath();
ctx.fillStyle = "rgb(0, 71, 188)";
ctx.fill();
// layer1/Compound Path
ctx.beginPath();
// layer1/Compound Path/Path
ctx.moveTo(139.4, 305.1);
ctx.lineTo(44.9, 305.1);
ctx.lineTo(44.9, 210.6);
ctx.lineTo(139.4, 210.6);
ctx.lineTo(139.4, 305.1);
ctx.closePath();
// layer1/Compound Path/Path
ctx.moveTo(47.3, 302.7);
ctx.lineTo(137.1, 302.7);
ctx.lineTo(137.1, 212.9);
ctx.lineTo(47.3, 212.9);
ctx.lineTo(47.3, 302.7);
ctx.closePath();
ctx.fillStyle = "rgb(0, 0, 103)";
ctx.fill();
ctx.restore();
}
function drawScreen() {
// layer1/Path
ctx.save();
ctx.beginPath();
ctx.moveTo(38.2, 78.5);
ctx.lineTo(283.4, 78.5);
ctx.lineTo(283.4, 171.2);
ctx.lineTo(275.2, 164.3);
ctx.lineTo(274.0, 86.7);
ctx.lineTo(46.7, 85.5);
ctx.lineTo(38.2, 78.5);
ctx.closePath();
ctx.fillStyle = "rgb(104, 104, 104)";
ctx.fill();
// layer1/Group
// layer1/Group/Path
ctx.save();
ctx.beginPath();
ctx.moveTo(274.6, 163.7);
ctx.lineTo(47.1, 163.7);
ctx.lineTo(47.1, 86.0);
ctx.lineTo(274.6, 86.0);
ctx.lineTo(274.6, 163.7);
ctx.closePath();
ctx.fillStyle = "rgb(66, 160, 160)";
ctx.fill();
// layer1/Group/Compound Path
ctx.beginPath();
// layer1/Group/Compound Path/Path
ctx.moveTo(275.7, 164.8);
ctx.lineTo(45.9, 164.8);
ctx.lineTo(45.9, 84.8);
ctx.lineTo(275.7, 84.8);
ctx.lineTo(275.7, 164.8);
ctx.closePath();
// layer1/Group/Compound Path/Path
ctx.moveTo(48.3, 162.5);
ctx.lineTo(273.4, 162.5);
ctx.lineTo(273.4, 87.2);
ctx.lineTo(48.3, 87.2);
ctx.lineTo(48.3, 162.5);
ctx.closePath();
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();
// layer1/Compound Path
ctx.restore();
ctx.beginPath();
// layer1/Compound Path/Path
ctx.moveTo(284.6, 172.3);
ctx.lineTo(37.0, 172.3);
ctx.lineTo(37.0, 77.3);
ctx.lineTo(284.6, 77.3);
ctx.lineTo(284.6, 172.3);
ctx.closePath();
// layer1/Compound Path/Path
ctx.moveTo(39.4, 170.0);
ctx.lineTo(282.2, 170.0);
ctx.lineTo(282.2, 79.7);
ctx.lineTo(39.4, 79.7);
ctx.lineTo(39.4, 170.0);
ctx.closePath();
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();
ctx.restore();
}
function drawBackground() {
// layer1/Group
ctx.save();
// layer1/Group/Path
ctx.save();
ctx.beginPath();
ctx.moveTo(1.9, 41.3);
ctx.lineTo(45.8, 1.2);
ctx.lineTo(468.7, 1.2);
ctx.lineTo(510.5, 41.3);
ctx.lineTo(306.2, 235.4);
ctx.lineTo(1.9, 41.3);
ctx.closePath();
ctx.fillStyle = "rgb(81, 81, 81)";
ctx.fill();
// layer1/Group/Compound Path
ctx.beginPath();
// layer1/Group/Compound Path/Path
ctx.moveTo(306.4, 236.9);
ctx.lineTo(305.6, 236.4);
ctx.lineTo(0.0, 41.4);
ctx.lineTo(45.4, 0.0);
ctx.lineTo(469.2, 0.0);
ctx.lineTo(512.2, 41.3);
ctx.lineTo(511.3, 42.1);
ctx.lineTo(306.4, 236.9);
ctx.closePath();
// layer1/Group/Compound Path/Path
ctx.moveTo(3.8, 41.1);
ctx.lineTo(306.1, 233.9);
ctx.lineTo(508.8, 41.3);
ctx.lineTo(468.2, 2.3);
ctx.lineTo(46.3, 2.3);
ctx.lineTo(3.8, 41.1);
ctx.closePath();
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();
// layer1/Path
ctx.restore();
ctx.beginPath();
ctx.moveTo(510.5, 549.8);
ctx.lineTo(1.9, 549.8);
ctx.lineTo(1.9, 41.3);
ctx.lineTo(510.5, 41.3);
ctx.lineTo(510.5, 549.8);
ctx.closePath();
ctx.fillStyle = "rgb(131, 131, 131)";
ctx.fill();
// layer1/Path
ctx.beginPath();
ctx.moveTo(342.5, 181.0);
ctx.bezierCurveTo(474.6, 299.1, 510.5, 549.8, 510.5, 549.8);
ctx.lineTo(510.5, 41.3);
ctx.lineTo(1.9, 41.3);
ctx.bezierCurveTo(1.9, 41.3, 210.4, 62.8, 342.5, 181.0);
ctx.closePath();
ctx.fillStyle = "rgb(137, 137, 137)";
ctx.fill();
// layer1/Path
ctx.beginPath();
ctx.moveTo(510.5, 549.8);
ctx.lineTo(1.9, 549.8);
ctx.lineTo(1.9, 41.3);
ctx.lineTo(20.1, 42.5);
ctx.lineTo(20.1, 532.5);
ctx.lineTo(510.5, 532.1);
ctx.lineTo(510.5, 549.8);
ctx.closePath();
ctx.fillStyle = "rgb(104, 104, 104)";
ctx.fill();
// layer1/Path
ctx.beginPath();
ctx.moveTo(1.9, 41.3);
ctx.lineTo(510.5, 41.3);
ctx.lineTo(510.5, 549.8);
ctx.lineTo(492.3, 532.1);
ctx.lineTo(492.3, 58.6);
ctx.lineTo(20.1, 59.0);
ctx.lineTo(1.9, 41.3);
ctx.closePath();
ctx.fillStyle = "rgb(160, 160, 160)";
ctx.fill();
// layer1/Compound Path
ctx.beginPath();
// layer1/Compound Path/Path
ctx.moveTo(511.7, 551.0);
ctx.lineTo(0.7, 551.0);
ctx.lineTo(0.7, 40.1);
ctx.lineTo(511.7, 40.1);
ctx.lineTo(511.7, 551.0);
ctx.closePath();
// layer1/Compound Path/Path
ctx.moveTo(3.1, 548.7);
ctx.lineTo(509.3, 548.7);
ctx.lineTo(509.3, 42.4);
ctx.lineTo(3.1, 42.4);
ctx.lineTo(3.1, 548.7);
ctx.closePath();
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<h3 id="row">Row</h3>
<h3 id="col">Col</h3>
<canvas id="canvas" width=513 height=551></canvas>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？