HTML5 ( canvas, javascript ) 图像，制作痕迹
[英]HTML5 ( canvas, javascript ) The image, makes traces
问题描述
enter image description here firstly sorry for my english.
在这里输入图片描述首先对不起我的英语。 Second, I have a problem with my javascript.其次，我的 javascript 有问题。 I trying to make something like baner which changes images inside.我试图制作像baner这样的东西来改变里面的图像。 But when i want to contiune my script, the last image out of canvas field makes me problem.但是当我想继续我的脚本时，canvas 字段中的最后一个图像让我遇到了问题。 Its makes leaving traces.它使留下痕迹。 Its my code.它是我的代码。
<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>
2 个解决方案
解决方案1
0 2022-01-05 03:48:52
When loading images in javascript, note that this process is asynchronous.在 javascript 中加载图像时，请注意此过程是异步的。 When assigning a value to the src attribute of an Image element, you need to get the element in the onload callback function of this element.给Image元素的src属性赋值时，需要在该元素的onload回调function中获取该元素。 Otherwise, when drawing to the canvas, the element may not have fully loaded the corresponding image resource.否则，当绘制到 canvas 时，该元素可能没有完全加载相应的图像资源。
const img = new Image()
img.onload = function () {
// img fully loaded here
}
img.src = 'path/to/image/sources'
解决方案2
0 2022-01-05 08:13:39
You never call context.restore() , so you are stacking a lot of CanvasStates in memory (which will make your whole application slow down in few minutes), and more directly noticeable, your context transform is never reset, meaning that at the second call the coordinate 0, 0 will be the pixels at coordinates -1, 0 and at third call -2, 0 etc. which will make your call to clearRect() miss one more pixel on the right side of the canvas every time.您从不调用context.restore() ，因此您在 memory 中堆叠了很多 CanvasStates（这将使您的整个应用程序在几分钟内变慢），更直接明显的是，您的上下文转换永远不会重置，这意味着在第二调用坐标0, 0将是坐标-1, 0和第三次调用-2, 0等处的像素，这将使您对clearRect()的调用每次都错过 canvas 右侧的一个像素。
It's quite unclear what you were after, but to correctly clear your context, call context.setTransform(1, 0, 0, 1, 0, 0) before calling clearRect() , this will reset the transformation matrix to its identity matrix.目前还不清楚你在做什么，但要正确清除上下文，请在调用clearRect()之前调用context.setTransform(1, 0, 0, 1, 0, 0) ，这会将转换矩阵重置为其单位矩阵。
Then if you want to translate your context by an ever decreasing value, store that value in a variable and use it in your call to translate() .然后，如果您想通过不断减小的值来翻译您的上下文，请将该值存储在一个变量中并在您对translate()的调用中使用它。
Finally, remove that call to save() because it's not needed.最后，删除对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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.