Question

我找到了这段代码

http://jsfiddle.net/dtrooper/AceJJ/

我试图在画布上添加背景图片（所以它不会变成黑色）。

我已将这些行添加到$（文档）.ready函数

var background = new Image();
background.src = url("img/header.jpg");

但我得到的只是未捕获的SyntaxError：意外的令牌ILLEGAL

我还希望在背景之上添加文字（说＆＃34;欢迎来到新的一年＆＃34; + NewLine +＆＃34;安全和好运＆＃34;

谢谢

Answer 1

在循环函数中改变：

// clear canvas
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

对此：

context.save();
if (first) { // only the first time you draw the full image
  first = false;
  context.globalAlpha = 1;
} else {
    context.globalAlpha = 0.2; // <--- PLAY WITH THIS FOR BETTER EFFECT
}
context.drawImage(img, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
context.restore()


// clear canvas
//context.fillStyle = "rgba(0, 0, 0, 0.05)";
//context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

在循环函数之外添加：

var img = new Image();
var first = true;
img.src = "YOUR_IMAGE_URL";

不完美，但从这里你可以找到你的解决方案。

示例： http://jsfiddle.net/AceJJ/1748/

Answer 2

jsFiddle：https://jsfiddle.net/CanvasCode/6ju8acro/1/

javascript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image();
img.src = "http://imagesci.com/img/2013/03/cute-christmas-dogs-8313-hd-wallpapers.jpg";

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  ctx.font = '40pt Calibri';
  ctx.fillStyle = 'red';
  ctx.fillText("Welcome to the new year", 250, 100);
  ctx.fillText("Be safe and good luck", 350, 600);
}

您必须创建一个新的Image变量，然后访问其属性src，该属性是图像的来源。因此，您首先要创建一个新的Image来提供源代码。然后我们必须先等待图像加载。加载图像后，我们通过drawImage将其渲染到画布，然后我们继续使用fillText函数绘制一些文本。

您必须弄清楚如何正确居中文本并更改图像，但我提供的代码应该让您开始：）

更新

jsFiddle：http://jsfiddle.net/CanvasCode/AceJJ/1743/

// clear canvas
// Render background and text first
context.drawImage(img, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
context.font = '40pt Calibri';
context.fillStyle = 'red';
context.fillText("Welcome to the new year", 150, 100);
context.fillText("Be safe and good luck", 250, 600);
//context.fillStyle = "rgba(0, 0, 0, 0.05)";
//context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

只需在循环函数中渲染图像和文本，但是如上所述，您需要找出渲染图像和文本的最佳方法

另一次更新

jsFiddle：http://jsfiddle.net/CanvasCode/AceJJ/1756/

要在图像上绘制烟花痕迹，只需在火箭渲染时创建粒子

  // ... near the end of the Rocket.prototype.render function
  c.fill();
  c.restore();

  var particle = new Particle(this.pos);

  particle.size = 10;

  particle.gravity = 0.2;
  particle.resistance = 0.92;
  particle.shrink = Math.random() * 0.05 + 0.93;

  particle.flick = true;
  particle.color = this.explosionColor;

  particles.push(particle);
};

Answer 3

试试这个：

var img = new Image();
img.src = "http://imgurl.com";

url（）用于CSS。

如何在画布上使用背景图像？

3 个答案:

更新

另一次更新