如何使用Canvas或jQuery将图像和文本放在背景图像上?
问题描述:
我想要使用Canvas/jQuery将图像和文本放在背景图像上,但我不知道如何做到这一点。我需要这样做http://static.catfly.com/quiz/which-friend-should-be-kidnapted-by-aliens/en/cover.jpg如何使用Canvas或jQuery将图像和文本放在背景图像上?
我已经尝试过,发现一些脚本的博客,但它不是完整的脚本,它只是一个圈子,任何人都可以帮助我吗?
以下是我的脚本。
<body onload="displayImage()">
<script type="text/javascript">
//Global variables
var myImage = new Image(); // Create a new blank image.
// Load the image and display it.
function displayImage()
{
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext)
{
// Specify 2d canvas type.
ctx = canvas.getContext("2d");
// When the image is loaded, draw it.
myImage.onload = function() {
// Load the image into the context.
ctx.drawImage(myImage, 0, 0);
// Get and modify the image data.
changeImage();
}
// Define the source of the image.
myImage.src = "https://pbs.twimg.com/profile_image/843519123711803393/pyYe9LFq_400x400.jpg";
}
}
function changeImage()
{
ctx.strokeStyle = "white";
ctx.lineWidth = "100";
ctx.beginPath();
ctx.arc(100, 100, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();
}
</script>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
答
其中的一个问题是,在画布上只有200x200和圆的线宽为100,白色的,所以得出当它填充大部分画布(它也略有画布区外画这个案例)。
而且,有问题的图像也有一个负载错误,这可能是此处的主要原因(应始终添加onerror + onabort处理程序)。
只需调整线宽,固定图像,并且我还建议将画布设置得更大(可以使用图像大小进行设置)。
我没有要求解决包含的脚本,我想让这个图像看起来像这样http://static.catfly.com/quiz/which-friend-should-be-kidnapted-by-aliens/en/ cover.jpg –