在這里輸入圖片描述首先對不起我的英語。其次，我的 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>
uj5u.com熱心網友回復：
你從不呼叫context.restore()，所以你在記憶體中堆疊了很多 CanvasStates（這會使你的整個應用程式在幾分鐘內變慢），更直接地引人注目的是，你的背景關系變換永遠不會重置，這意味著在第二次呼叫時坐標0, 0將是坐標-1, 0和第三次呼叫-2, 0等處的像素，這將使您的呼叫clearRect()每次都錯過畫布右側的一個像素。
很不清楚你在追求什么，但要正確清除你的背景關系，在呼叫context.setTransform(1, 0, 0, 1, 0, 0)之前呼叫clearRect()，這會將轉換矩陣重置為其單位矩陣。
然后，如果您想通過一個不斷減小的值來轉換您的背景關系，將該值存盤在一個變數中并在您呼叫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>uj5u.com熱心網友回復：
在 javascript 中加載影像時，請注意此程序是異步的。給Image元素的src屬性賦值時，需要在該元素的onload回呼函式中獲取該元素。否則，當繪制到畫布時，元素可能沒有完全加載相應的影像資源。
const img = new Image()
img.onload = function () {
// img fully loaded here
}
img.src = 'path/to/image/sources'
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/405776.html
標籤：
上一篇：Vue.js中不需要的影片錯誤
下一篇：如何創建CSS旋轉加載影片？