我在画布 onload 上绘制图像并将ontouchmove事件赋予绘制的图像。我面临的问题是当图像在画布中移动时,正在绘制多个图像实例,根据功能这是正确的,但我只想要最后一个实例?
var x1 = 0;
var x2 = 0;
var y1 = 0;
var y2 = 0;
var imagesLoaded = 0;
var img = '';
var img1 = '';
var img2 = '';
var img3 = '';
var img4 = '';
var img5 = '';
var img6 = '';
var context = '';
var canvas;
function initImg() {
canvas = document.getElementById('final');
context = canvas.getContext('2d');
img = loadImage('images/img01_res.jpg', main);
img1 = loadImage('images/color_animation_img01.png', main);
img2 = loadImage('images/color_animation_img02.png', main);
img3 = loadImage('images/color_animation_img03.png', main);
img4 = loadImage('images/color_animation_img04.png', main);
img5 = loadImage('images/color_animation_img05.png', main);
img6 = loadImage('images/color_animation_img06.png', main);
img7 = loadImage(hidden, main);
function main() {
imagesLoaded += 1;
if (imagesLoaded == 8) {
context.drawImage(img, 0, 0);
context.drawImage(img1, 22, 0);
context.drawImage(img2, 68, 0);
context.drawImage(img3, 114, 0);
context.drawImage(img4, 160, 0);
context.drawImage(img5, 207, 0);
context.drawImage(img6, 253, 0);
context.drawImage(img7, 48, 72);
var d = canvas.toDataURL("image/png");
}
}
}
var x1 = 0;
var x2 = 0;
var y1 = 0;
var y2 = 0;
var imagesLoaded = 0;
var img = '';
var img1 = '';
var img2 = '';
var img3 = '';
var img4 = '';
var img5 = '';
var img6 = '';
var context = '';
var canvas;
function initImg() {
canvas = document.getElementById('final');
context = canvas.getContext('2d');
img = loadImage('images/img01_res.jpg', main);
img1 = loadImage('images/color_animation_img01.png', main);
img2 = loadImage('images/color_animation_img02.png', main);
img3 = loadImage('images/color_animation_img03.png', main);
img4 = loadImage('images/color_animation_img04.png', main);
img5 = loadImage('images/color_animation_img05.png', main);
img6 = loadImage('images/color_animation_img06.png', main);
img7 = loadImage(hidden, main);
function main() {
imagesLoaded += 1;
if (imagesLoaded == 8) {
context.drawImage(img, 0, 0);
context.drawImage(img1, 22, 0);
context.drawImage(img2, 68, 0);
context.drawImage(img3, 114, 0);
context.drawImage(img4, 160, 0);
context.drawImage(img5, 207, 0);
context.drawImage(img6, 253, 0);
context.drawImage(img7, 48, 72);
var d = canvas.toDataURL("image/png");
}
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
function onTouchstart(id, event) {
try {
x1 = event.touches[0].pageX;
y1 = event.touches[0].pageY;
}
catch (error) {
try {
x1 = event.clientX;
y1 = event.clientY;
}
catch (ex) {
}
}
try {
event.preventDefault();
}
catch (e) {
}
}
function onTouchmove(id, event) {
try {
x2 = event.touches[0].pageX;
y2 = event.touches[0].pageY;
}
catch (error) {
try {
x2 = event.clientX;
y2 = event.clientY;
}
catch (ex) {
}
}
try {
event.preventDefault();
}
catch (e) {
}
context.drawImage(img1, x2, y2);
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
function onTouchstart(id, event) {
try {
x1 = event.touches[0].pageX;
y1 = event.touches[0].pageY;
}
catch (error) {
try {
x1 = event.clientX;
y1 = event.clientY;
}
catch (ex) {
}
}
try {
event.preventDefault();
}
catch (e) {
}
}
function onTouchmove(id, event) {
try {
x2 = event.touches[0].pageX;
y2 = event.touches[0].pageY;
}
catch (error) {
try {
x2 = event.clientX;
y2 = event.clientY;
}
catch (ex) {
}
}
try {
event.preventDefault();
}
catch (e) {
}
context.drawImage(img1, x2, y2);
}