Question

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

创造气泡;

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

Answer 1

你说你在画布上画画时遇到了麻烦...

这是一个读取文本输入并使用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/

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

1 个答案: