如何使用JavaScript中的函数为图像创建边框

我想拍摄一幅图像，并在JavaScript中创建一个函数

addborder（y）

，使图像具有黄色边框。目的是了解如何使用JavaScript对图像执行操作

<!--HTML-->

<img id="img" src="http://pre01.deviantart.net/3d38/th/pre/f/2012/298/5/a/dubstep_wallpaper_by_theblazia-d5iwj4c.png" alt="boom boom boom" >

<p id="here"></p>

<Script>

var y = document.getElementById("img"); //I think it stores "img" as var y.

function addborder(x) {
  for (var pixel of x.values()) {
    //loop to change "img" border pixels to yellow
    if (
      pixel.getX() < 50 ||
      pixel.getX() > x.getWidth() - 50 ||
      pixel.getY() < 200 ||
      pixel.getY() > x.getHeight() - 50
    ) {
      pixel.setRed(255);
      pixel.setGreen(255);
      pixel.setBlue(255);
    }
  }
  document.getElementById("here").innerHTML = x; //should print in paragraph?

  //do I need a return statement??
}

var y=document.getElementById（“img”）//我认为它将“img”存储为变量y。
函数addborder（x）{
对于（x.values（）的变量像素）{
//循环将“img”边框像素更改为黄色
如果(
pixel.getX（）<50||
pixel.getX（）>x.getWidth（）-50||
pixel.getY（）<200||
pixel.getY（）>x.getHeight（）-50
) {
像素。设置为红色（255）；
像素设置为绿色（255）；
像素设置值（255）；
}
}
document.getElementById（“此处”）.innerHTML=x；//是否应在段落中打印？
//我需要退货声明吗？？
}

通常您只需使用直接通过JavaScript更改CSS；您不需要使用复杂的函数来处理像素本身

在下面的示例中，我演示了如何使用

.style.border

创建简单的边框：

var image=document.getElementById（'img'）；
image.style.border='thick solid#0000FF'
Javascript/DOM不是这样工作的。学习Javascript语法的基础知识，了解CSS和/或
Canvas
。如果正确缩进代码，就不需要在每个右括号上写注释来解释关闭的内容。试着寻求帮助