HTML5(画布，javascript)的图像，使痕迹

在这里输入图像描述首先对不起我的英语。其次，我的javascript有问题。我试图制作一些类似baner的东西来改变内部的图像。但是当我想连续我的脚本时，画布字段中的最后一张图像让我遇到问题。它留下了痕迹。这是我的代码。

<html>
<head>
<link rel="stylesheet" href="style.css">
<script>

var cat= new Image();
function init(){
cat.src = 'cat.png';
window.requestAnimationFrame(draw);
}
function draw() {
var context = document.getElementById('spin').getContext('2d');

context.clearRect(0, 0, 530, 110);
context.save();
context.translate(-1, 0);


context.drawImage(cat, 5, 0);
context.drawImage(cat, 110, 0);
context.drawImage(cat, 215, 0);
context.drawImage(cat, 320, 0);
context.drawImage(cat, 425, 0);
context.drawImage(cat, 530, 0); /// its an image with problem





window.requestAnimationFrame(draw);
}
init();

</script>
</head>
<body>
<div class="roulette">
<canvas id="spin" width="530" height="110"></canvas>
</div>
</body>

你从不调用context.restore()，所以你在内存中堆叠了很多 CanvasStates(这将使你的整个应用程序在几分钟内变慢)，更直接地注意到，你的上下文转换永远不会重置，这意味着在第二次调用时，坐标0, 0将是坐标-1, 0处的像素，在第三次调用-2, 0等时，这将使你调用clearRect()在每次都在画布的右侧。

目前还不清楚你在追求什么，但要正确清除上下文，请在调用clearRect()之前调用context.setTransform(1, 0, 0, 1, 0, 0)，这会将转换矩阵重置为其单位矩阵.
然后，如果您想通过不断减小的值来转换上下文，请将该值存储在变量中，并在translate()调用 .
最后，删除对save()的调用，因为它不是必需的。

let x = 0; // the variable where we store the current offset
var cat = new Image();
function init() {
cat.src = 'https://picsum.photos/110/110';
// always wait for your image has loaded before doing anything with it
cat.onload = evt =>
window.requestAnimationFrame(draw);
}
function draw() {
var context = document.getElementById('spin').getContext('2d');
// update the offset
x -= 1;
// last image is hidden, stop the loop?
if (x < (530 + 110) * -1) {
return;
}
// reset the context matrix
context.setTransform(1, 0, 0, 1, 0, 0);
// clear the full canvas
context.clearRect(0, 0, 530, 110);
// set the updated offset
context.translate(x, 0);
context.drawImage(cat, 5, 0);
context.drawImage(cat, 110, 0);
context.drawImage(cat, 215, 0);
context.drawImage(cat, 320, 0);
context.drawImage(cat, 425, 0);
context.drawImage(cat, 530, 0);
window.requestAnimationFrame(draw);
}
init();

<canvas width="530" height="110" id="spin"></canvas>

在javascript中加载图像时，请注意此过程是异步的。在为 Image 元素的 src 属性赋值时，需要在此元素的 onload 回调函数中获取该元素。否则，在绘制到画布时，元素可能尚未完全加载相应的图像资源。

const img = new Image()
img.onload = function () {
// img fully loaded here
}
img.src = 'path/to/image/sources'

相关内容

最新更新

热门标签：