html5画布，使用html元素和css

我正在尝试使用HTML5画布制作一个游戏。据我所知，我在html中创建了一个canvas元素，并使用javascript对其进行了修改

例如，如果我想在画布中创建一个文本输入字段，该怎么办。因此，如果在游戏过程中某一时刻玩家必须输入自己的名字，那么最好能够使用html元素

查看此项以了解更多详细信息。

在

及


var输入=新画布输入(
{  
canvas:document.getElementById（'canvas'），
尺码：18，
fontFamily：“Arial”，
fontColor:“#212121”，
fontWeight:'粗体'，
宽度：300，
填充：8，
边框宽度：1，
边框颜色：“#000”，
边界半径：3，
盒影：“1px 1px 0px#fff”，
innerShadow:“0px 0px 5px rgba（0,0,0,0.5）”，
占位符：“在此处输入消息…”
);
这里有一种方法：

演示：

Html5画布没有本机文本输入功能，但您可以始终使用css来


将输入文本元素临时放置在画布上

让用户输入他们的姓名并按下提交按钮

获取文本值（用户名）

隐藏临时输入文本元素


单击“个人信息”图标前后：


Html

<div id="wrapper">
    <canvas id="canvas" width=300 height=300></canvas>
    <div id="myname">
        <input type="text" id="name" size=15>
        <button id="submitName">OK</button>
    </div>
</div>

Javascript

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;


// name input related variables
$myname=$("#myname");
var playerName="";

// load a person icon and display it top-left
var img=new Image();
img.onload=start;
img.src="personIcon.png";
function start(){
    ctx.drawImage(img,0,0);
}


// listen for mousedown events
function handleMouseDown(e){

  // tell the browser we'll handle this event
  e.preventDefault();
  e.stopPropagation();

  // get the mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // if the mouse was pressed over the person icon
  // then make the name-input visible
  if(mouseX<img.width && mouseY<img.height){
      $("#name").text(playerName);
      $myname.css("visibility","visible");
  }

}

// listen for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});

// listen for clicks on the OK button
// if clicked, save the player's name
// and hide the name-input
$("#submitName").click(function(){
    playerName=$("#name").val();
    $myname.css("visibility","hidden");
});

//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
//命名输入相关变量
$myname=$（“#myname”）；
var playerName=“”；
//加载一个人图标并显示在左上角
var img=新图像（）；
img.onload=启动；
img.src=“personIcon.png”；
函数start（）{
ctx.drawImage（img，0,0）；
}
//收听mousedown事件
功能手柄向下（e）{
//告诉浏览器我们将处理此事件
e、 预防默认值（）；
e、 停止传播（）；
//获取鼠标位置
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//如果将鼠标按在人物图标上
//然后使名称输入可见
如果（mouseXHtml5）画布没有本机文本输入功能，但始终可以使用css（1）在画布上临时放置输入文本元素，（2）让用户输入文本（3）获取文本值（用户名）和（4）删除临时输入文本元素。可能的重复
#wrapper{
    position:relative;
}
#canvas{
    position:absolute;
    border:1px solid red;
}
#myname{ 
    position:absolute;
    left:28px;top:3px;
    visibility:hidden;
}

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;


// name input related variables
$myname=$("#myname");
var playerName="";

// load a person icon and display it top-left
var img=new Image();
img.onload=start;
img.src="personIcon.png";
function start(){
    ctx.drawImage(img,0,0);
}


// listen for mousedown events
function handleMouseDown(e){

  // tell the browser we'll handle this event
  e.preventDefault();
  e.stopPropagation();

  // get the mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // if the mouse was pressed over the person icon
  // then make the name-input visible
  if(mouseX<img.width && mouseY<img.height){
      $("#name").text(playerName);
      $myname.css("visibility","visible");
  }

}

// listen for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});

// listen for clicks on the OK button
// if clicked, save the player's name
// and hide the name-input
$("#submitName").click(function(){
    playerName=$("#name").val();
    $myname.css("visibility","hidden");
});