[英]How can I use a background image on a canvas?
I found this code我找到了这个代码
http://jsfiddle.net/dtrooper/AceJJ/
and I'm trying to add a background image to the canvas (so it won't be black).我正在尝试向画布添加背景图像(因此它不会是黑色的)。
I've added these lines to the $(document).ready function我已将这些行添加到 $(document).ready 函数中
var background = new Image();
background.src = url("img/header.jpg");
But all I get is Uncaught SyntaxError: Unexpected token ILLEGAL但我得到的只是Uncaught SyntaxError: Unexpected token ILLEGAL
I also want to have text on top of the background (saying something like "Welcome to the new year" + NewLine + "Be safe and good luck"我还想在背景上添加文字(说“欢迎来到新的一年”+ NewLine +“注意安全,祝你好运”
Thank You谢谢你
In the loop function change this:在循环函数中改变这个:
// clear canvas
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
To this:对此:
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);
And out of the loop function add this:在循环函数外添加以下内容:
var img = new Image();
var first = true;
img.src = "YOUR_IMAGE_URL";
Is not perfect, but from here you can find your solution.并不完美,但从这里您可以找到您的解决方案。
The example: http://jsfiddle.net/AceJJ/1748/例子: http : //jsfiddle.net/AceJJ/1748/
jsFiddle : https://jsfiddle.net/CanvasCode/6ju8acro/1/ jsFiddle: https ://jsfiddle.net/CanvasCode/6ju8acro/1/
javascript 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);
}
You have to create a new Image
variable and then access its property src
which is the source of the image.您必须创建一个新的
Image
变量,然后访问它的属性src
,它是图像的来源。 So you first create a new Image
provide a source.所以你首先创建一个新的
Image
提供一个源。 Then we must first wait for the image to load.然后我们必须首先等待图像加载。 Once the image has loaded we render it to the canvas via
drawImage
, then we go ahead and draw some text using the fillText
function.图像加载
drawImage
,我们通过drawImage
将其渲染到画布上,然后我们继续使用fillText
函数绘制一些文本。
You will have to work out how to centre the text correctly and change the image but the code I have provided should get you started :)您必须弄清楚如何正确居中文本并更改图像,但我提供的代码应该可以帮助您入门:)
jsFiddle : http://jsfiddle.net/CanvasCode/AceJJ/1743/ 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);
Just render the image and text in the loop function, however as I stated above you will need to work out the best way to render the image and text只需在循环函数中渲染图像和文本,但是如上所述,您需要找出渲染图像和文本的最佳方式
jsFiddle : http://jsfiddle.net/CanvasCode/AceJJ/1756/ jsFiddle: http : //jsfiddle.net/CanvasCode/AceJJ/1756/
To draw the firework trails over the image, just create particles when the rocket is rendered like so要在图像上绘制烟花轨迹,只需在像这样渲染火箭时创建粒子
// ... 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);
};
Try this :尝试这个 :
var img = new Image();
img.src = "http://imgurl.com";
url() is used in CSS. url() 在 CSS 中使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.