如何连续创建多个史莱克图像?

时间:2019-04-03 14:14:45

标签: javascript html css web

因此,我有一个页面,当用户按住鼠标左键时,将在其光标所在的位置绘制史瑞克图像。问题是,当鼠标按下时只能创建一张图片,但是我需要一个无穷无尽的怪物。

代码如下:

var shrekId = 0;

document.onmousemove = function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

document.body.onmousedown = function(event) {
  shrekId = 0;
  interval = setInterval(draw(event), 100);
}

document.body.onmouseup = function() {
  clearInterval(interval);
}

function draw(event) {
  this["img" + shrekId] = document.createElement("img");
  this["img" + shrekId].src = "http://pngimg.com/uploads/shrek/shrek_PNG3.png";
  this["img" + shrekId].style = "height: 100px; width: 100px; position: absolute; left: " + (mouseX - 50) + "px; top: " + (mouseY - 50) + "px; x-index: 100;";
  this["img" + shrekId].ondragstart = function() { return false; };
  document.body.appendChild(this["img" + shrekId]);
  shrekId += 1
}

3 个答案:

答案 0 :(得分:2)

问题在于以下行:library(tidyverse) library(highcharter) mapdata <- get_data_from_map(download_map_data("custom/world")) hcmap("custom/world", data = data, value = "Percent", joinBy = c("iso-a3", "Code"), name = "Map", dataLabels = list(enabled = FALSE, format = "{point.name}"), borderColor = "#FAFAFA", borderWidth = 0.1, tooltip = list(valueDecimals = 2, valueSuffix = "%"))

interval = setInterval(draw(event), 100);的第一个参数应该是一个函数,但是您要在此处调用该函数并传递结果,请尝试以下操作:

setInterval

或者如果您不支持ES6:

interval = setInterval(() => { draw(event) }, 100);

虽然您似乎没有在draw函数中使用interval = setInterval(function() { draw(event) }, 100);,但在这种情况下,您可以直接传递draw函数本身:

event

答案 1 :(得分:2)

您正在传递执行函数的结果,而不是函数本身。由于该函数的结果是不确定的,因此您要执行draw,然后将undefined传递给setInterval,它不会执行任何操作。

代替此:

setInterval(draw(), 100);

您的声明应为:

setInterval(draw, 100);

函数名末尾没有括号。

当您传递draw()时,该函数立即调用该函数并获取其返回值。当传递传递对函数的引用的draw时,setInterval可以在将来调用它(这是您期望的)。

答案 2 :(得分:2)

setInterval()将一个函数作为参数,这是通过传递函数名称(不带括号)来完成的,如下所示:

myFunc()
{
    console.log('hello');
    return 1;
}
setInterval(myFunc, 100);

当您确实包括方括号时(如您在示例中所做的那样),它将运行该函数,获取该函数的返回值,并将其提供给setInterval。 例如:

myFunc()
{
    console.log('hello');
    return 1;
}
setInterval(myFunc(), 100);

变成

setInterval(1, 100);

因为myFunc()返回1。

因此,您应该能够通过删除间隔中的括号来修正代码:

interval = setInterval(draw(event), 100);
// to
interval = setInterval(draw, 100);

这还意味着您必须从函数中删除参数:

function draw(event) {
// to
function draw() {