html5 canvas，使用html元素和css

I am trying to make a game using the HTML5 canvas. As I understand it, I create a canvas element in html and modify it using javascript.

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

What about if I want for example to create a text input field inside the canvas. So if at one point during the game the player must enter his name, it would be nice to be able to use a html element <input="text" etc... and style it with css.

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

How can this be achieved considering all the code is done in javascript?

考虑到所有代码都是在javascript中完成的,如何才能实现这一目标?

Thanks

2 个解决方案

#1

Here's one way to do it:

这是一种方法:

A Demo: http://jsfiddle.net/m1erickson/9f2ct/

演示:http://jsfiddle.net/m1erickson/9f2ct/

Html5 Canvas has no native text input capability, but you can always use css to

Html5 Canvas没有本机文本输入功能,但您始终可以使用css

• Temporarily place a input-text-element over the canvas,

  暂时在画布上放置一个input-text-element,

• Have user enter their name and press a submit button,

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

• Get the text value (user's name),

  获取文本值(用户名),

• Hide the temporary input-text-element

  隐藏临时input-text-element

Before and After clicking the "Personal Info" icon:

单击“个人信息”图标之前和之后:

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>

CSS

#wrapper{
    position:relative;
}
#canvas{
    position:absolute;
    border:1px solid red;
}
#myname{ 
    position:absolute;
    left:28px;top:3px;
    visibility:hidden;
}

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");
});

#2

Check This link for more details.
Script in github
And JSFiddle

查看此链接了解更多详情。 github和JSFiddle中的脚本

      <canvas id="canvas" width="350" height="50"></canvas>
<script>
    var input = new CanvasInput(
    {  
    canvas: document.getElementById('canvas'),  
    fontSize: 18,  
    fontFamily: 'Arial',  
    fontColor: '#212121',  
    fontWeight: 'bold',  
    width: 300,  
    padding: 8,  
    borderWidth: 1,  
    borderColor: '#000',  
    borderRadius: 3,  
    boxShadow: '1px 1px 0px #fff',  
    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',  
    placeHolder: 'Enter message here...'}

);
</script>