画布框html5代码,html5画布动态文本框(html5 canvas kinetic textbox)

html5画布动态文本框(html5 canvas kinetic textbox)

我想知道是否有方法让我打开文本框供用户输入onclick事件？ 我将如何去做这件事？ 我现在在想，可能有一种方法可以让我抓住用户在画布上输入的内容，并使用我已阅读的方法输出文本。 这有可能吗？ 但是，我将如何让用户在第一时间在画布上输入？

我做了大量的阅读，我能找到的所有例子都只是简单地将文本输出到画布上，而不是创建文本框。

有任何想法吗？

I was wondering if there is a way for me to open up a textbox for users to type in on an onclick event? How would i go about making this? I'm thinking now that there may be a way for me to grab what the user types on a canvas and use the methods i've read about to output the text. Is this a possibility? But how would i allow the user to type on the canvas in the first place?

I've done a lot of reading and all the examples i could find were about simply outputting text onto the canvas rather than creating a textbox.

Any ideas?

原文：https://stackoverflow.com/questions/9414587

更新时间：2019-11-06 03:51

最满意答案

你必须从字面上制作一个，就像在onclick事件中触发的一样，你需要： var myInput = document.createElement("textarea");

您需要将myInput.style.width ， height ， top ， left以及当然myInput.style.position为"absolute" ，然后将其放在用户期望的位置。

然后你需要分配事件给它。 也许在keydown它会查找Enter键，并且如果按下Enter键，它将会消失并提交文本，但是您希望它提交。

然后将其添加到页面。

也许它会在模糊事件上做同样的事情(如果用户点击了)。

A simple solution - use Javascript's alert box. This will enable us to grab the text which the user wants to place on the screen. Then write the text where ever you want on the canvas (lots of tutorials on how to write text on a canvas).

相关问答

你必须从字面上制作一个，就像在onclick事件中触发的一样，你需要： var myInput = document.createElement("textarea"); 您需要将myInput.style.width ， height ， top ， left以及当然myInput.style.position为"absolute" ，然后将其放在用户期望的位置。 然后你需要分配事件给它。 也许在keydown它会查找Enter键，并且如果按下Enter键，它将会消失并提交文本，但是您希望它提交

...

要将文本转换为垂直文本，只需使用rotate方法将旋转变换应用于画布： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations#Rotating 您可能还需要translate变换以在旋转后正确定位文本，使用变换进行播放，直到您弄清楚它们是如何工作的(如果您知道矩阵，则可以跳过此步骤) To turn the text into vertical text, you simply

...

一种简单的方法是在页面上创建图像元素，然后让drawImage从那里拉取数据。 你可能会尝试这样的事情 function useImage(ev){

// create the image element

var img = document.createElement('img');

// get the image url from the input box

img.src = document.getElementById('input').value;

...

基于这两个例子： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text 我已经建立了一个可以帮助您完成所需操作的示例： http ： //jsbin.com/ufiSilu/1/ JavaScript代码： function allowDrop(ev)

{

e

...

我正在做一个Jasper报告，将弹出菜单生成为服务器上的图像，然后将其加载到Kinetic.Image中进行实际显示。 可能不是最好的解决方案，但现在可以使用。 I'm doing a Jasper report to generate the popup menu as an image on the server, then loading it into a Kinetic.Image to actually show. May not be the best solution, but w

...

实际上，使用带有javascript库的coffeescript并不难。 最好的库将始终使用javascript，因为这是最兼容的格式。 就个人而言，我用coffeescript编写，然后通常包含javascript库。 当我在javascript中有示例或代码片段时，我将它们转换为http://js2coffee.org 。 从理论上讲，你可以将库转换过来，但不需要这样做。 我将我的coffeescript保存在一个单独的文件夹中，然后使用脚本轻松编译它们以进行测试 - 在OSX上，脚本看起来像

...

在这里......我刚刚更新了kineticJs库并使用了额外的标签..由朋友浆果提供

var stage = null;

var groups = {

dog: null,

bla: null

}

function setupSta

...

我想你应该看看这个变化： API更改新的Tween类。 旧的Transition类已经退役。 对于高级补间，例如沿曲线补间或构建时间轴，KineticJS推荐无缝集成的GreenSock动画平台。 I think you should look at this change: API Changes new Tween class. The old Transition class has been retired. For advanced tweens, such as tweening th

...

在您的函数displayAssetDescriptionTip中，您使用的是=赋值运算符而不是==比较运算符，因此您的第一个if条件始终匹配。 纠正了这个方面： function displayAssetDescriptionTip(canvasImage){

if(canvasImage.id == "assetBox")

document.getElementById('tipsParagraph').innerHTML = tips[34];

else if(

...

[根据提问者的评论添加回答] 你想要的是边缘检测 - 为一些严重的编码做好准备。 以下是Wiki所说的关于称为“行进方块”的常见边缘检测算法： http://en.wikipedia.org/wiki/Marching_squares 。 在d3(d3js.org)中，行进方块的一个很好的方法是。 http://code.google.com/p/testprogramming/source/browse/trunk/javascript/svg/d3/src/geom/contour.js?r=

...