html - 在页面上放置多个 HTML5 画布元素

Question

我用 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

我怎样才能做到这一点？提前致谢。

score 2 · Accepted Answer

如何将您的模型变成工作台

在此处输入图像描述

您已经拥有绘制主体、屏幕和按钮的功能。

所以任务变成了：

使按钮绘制代码可重用，以便轻松绘制所有 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);

把它们放在一起……</p>

下面的代码将使用循环绘制键盘上的所有按钮：

    // 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>

html - 在页面上放置多个 HTML5 画布元素

1 回答 1

Related

Reference