使用html5画布中的输入表单中的图像和文本填充活动气泡

debugcn 发表于 Dev

阿比库

我想制造一杯啤酒，里面有气泡。气泡四处移动。当您单击任何气泡时，它会弹出一个表单以填写您的详细信息，消息和图片。填充的消息和图片将显示在气泡中。任何人都可以单击气泡并阅读您的消息并分享。我能够创建气泡和动画，但无法用表单中的数据填充它。

产生气泡；

    // Create some gradient
var gradient = ctx.createRadialGradient(105, 105, 20, 120, 120, 50);
gradient.addColorStop(0, 'rgba(250,250,255,0)');
gradient.addColorStop(0.75, 'rgba(230,250,255,1.0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

// draw the gradient (note that we dont bother drawing a circle, this is more efficient and less work!)
// but make sure it covers the entire gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);

品牌

您说您无法从文字上画到画布上...

这是一个读取文本输入并用于context.fillText在画布上绘制文本的示例。

http://jsfiddle.net/m1erickson/4g63H/

Html

<input id="theText" type="text">
<button id="submit">Draw text on canvas</button><br>
<canvas id="canvas" width=300 height=300></canvas>

的JavaScript

// canvas related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

$("#submit").click(function () {

    var text = $("#theText").val()

    ctx.fillText(text, 20, 50);

});

这是有关如何使用context.drawImage在画布上绘制图像的链接：

http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。