javascript - 绘图应用程序 : turn pixels to grayscale or erase them-6ren

javascript - 绘图应用程序 : turn pixels to grayscale or erase them

转载作者：行者123 更新时间：2023-11-28 04:34:16

24

4

我有一个绘图应用程序，它由一个带有灰度背景图像的容器组成，在它上面有另一个图像(相同但不是灰度图像)。
当我在图像上绘制时，我会删除绘制的位置或转为灰度(以在背景中再现图像)。
我怎样才能做到这一点？
这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #wrapper {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: 0 auto;
            background-image: url('elephant-nb-400.jpg');
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <canvas width="600" height="400"></canvas>
    </div>
    <script>
        window.onload = function() {
            var wrapper = document.querySelector("#wrapper");
            var canvas = document.querySelector("#wrapper canvas");
            var context = canvas.getContext("2d");
            var image = document.createElement("img");
            image.setAttribute("src", "elephant-400.jpg");
            image.onload = function() {
                context.drawImage(image, 0, 0, 600, 400);
            };

            var positionsX = new Array();
            var positionsY = new Array();
            var movements = new Array();
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            var isErasing; 

            canvas.addEventListener("mousedown", function(e) {
                 var mouseX = e.pageX - this.offsetLeft;
                 var mouseY = e.pageY - this.offsetTop;
                 isErasing = true;
                 addPositions(mouseX, mouseY);
                 draw();
            });

            canvas.addEventListener("mousemove", function(e) {
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                if(isErasing) {
                    addPositions(mouseX, mouseY, true);
                    draw();
                }
            });

            canvas.addEventListener("mouseup", function(e) {
                isErasing = false;
            });

            var addPositions = function(x, y, isMoving) {
                positionsX.push(x);
                positionsY.push(y);
                movements.push(isMoving);
            }

            var draw = function(){
                //context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

                for(var i=0; i < positionsX.length; i++) {  
                  context.beginPath();
                  if(movements[i] && i){

                   }else{

                   }
                   context.lineTo(positionsX[i], positionsY[i]);
                   context.closePath();
                   context.stroke();
                }
              }

        }


    </script>
</body>

最佳答案

我的问题解决了。您需要获取图像数据:var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
在 draw() 函数中，您需要在 context 之后添加:context.putImageData(imageData, 0, 0, positionsX[i]-1, positionsY[i], 20, 20); .moveTo(positionsX[i-1], positionsY[i-1]);和 context.moveTo(positionsX[i]-1, positionsY[i]);

关于javascript - 绘图应用程序 : turn pixels to grayscale or erase them，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41568583/

24

4

0

文章推荐： c++ - Nextcloud 桌面客户端构建过程

文章推荐： c++ - 从 C++ 中的字符串列表生成正则表达式模式

文章推荐： javascript - javascript 追加中的单引号或双引号

c++ - remove-erase 和 find-erase 有什么区别
假设您要按值从 vector 中删除单个元素。 remove 之间有什么区别？ -删除: vector v; // add some values vector::iterator it = remo
c++ - STL::map erase 与 std::vector erase 的行为不同
class CSensor { public: CSensor(int nVal1,char* pVal2,unsigned int nVal3); CSensor(cons
c++ - 在 std::vector::erase() 和 std::deque::erase() 中复制/移动赋值
在回答过程中another question我偶然发现 std::vector::erase() 和 std::deque::erase() 的措辞略有不同。这就是 C++14 关于 std::de
c++ - 使用 std::vector.erase(begin(), end()) 或 std::vector.erase(begin(), begin()) 安全吗？
我想处理 vector 中的元素一段时间。为了优化这一点，我不想在处理项目时删除它，而是在最后删除所有已处理的项目。 vector::iterator it; for(it = items.begin
c++ - std::set `erase ( const key_type& x )` 是否以与 ` erase ( collection.find( x ) );` 相同的方式在 STL 中实现？
是否 std::set erase ( x ) 在 STL 中以相同的方式实现 erase ( collection.find( x ) ); (其中 x 是 const key_type&) 吗？
c++ - 捕获vector.erase()
This question already has answers here: How to catch .erase exception in vectors? (2个答案) 8天前关闭。当我尝试
c++ - 在迭代期间调用集合上的 erase()
我有以下代码: #include using namespace std; int main() { set S; S.insert("item1"); S.insert("i
函数中的 C++ erase()
在'helper'函数中输出集合元素时，预计元素'2'已经被移除。但实际结果仍然是'1 2 3 4 5'。但是，集合的大小是 4。我想知道潜在的问题。 #include #include us
html - 如何使覆盖文字为 "erased"
有点难以解释，但我想制作一个以图片为背景的网站，并在图片上覆盖一层灰色。然后我想在覆盖层上方添加一些文本，在文本所在的位置，灰色覆盖层被移除，因此文本是在没有灰色覆盖层的情况下写入的。我在一年前用图
c++ - 没有匹配的成员函数调用 'erase'
这是导致错误的代码: 工厂.h: #include #include namespace BaseSubsystems { template class CFactory
c++:使用迭代器调用的vector::erase
我正在研究结构 vector 。当我试图用迭代器调用这个函数时，像这样: vec2.erase (vec2.begin()+iter2); 它向我发送了这个错误: "no match for 'op
eraser.exe进程是什么文件 eraser进程查询
进程文件： eraser or eraser.exe 进程名称： Eraser 进程类别：存在安全风险的进程英文描述： eraser.exe is the main executable
c++ - map::erase 如何知道间隔是否有效？
我正在编写一个简单的程序，它使用了 std::map::erase . 该程序很好，但有一些我不明白的地方。如果我传给 erase function 第一个迭代器超出第二个迭代器的间隔，该函数不会删
java - 如何将 "erase"数字仅包含该数字的第一位数字
如果我的变量是 0 到 6294 之间的随机数，我如何让我的输出仅打印出第一个变量？我的随机数代码是 int random = (int)(Math.random() * 6294); 例如，如果它
c++ - 我的链表的 Erase() 函数中的错误
我正在尝试通过一个测试程序，并且我通过了所有测试，除了涉及到我的删除功能时，程序崩溃了。我最好的猜测可能是前面或后面的哨兵节点正在被删除。或内存泄漏。最佳答案我怀疑有人愿意阅读所有这些代码并为您
c++ - 如何在 while 循环中使用 .erase()？
背景:这是一个程序，用于将存储在 vector 中的数字逐位加 1。前面有 0 的数字可以作为输入，但不能作为输出。例如:0123 和 123 都是有效输入但 0124 是无效输出而 124 是
c++ - vector::erase 导致奇怪的行为
我正在尝试创建一个垂直滚动的射击游戏，当您按下空格键时，会创建一颗子弹，然后当子弹离开屏幕时，子弹就会被销毁。我通过声明为 vector bullets; 的 vector 跟踪子弹当我试图销毁屏幕外
c++ - 'erase' ing 之后的映射迭代器行为
我在下面写这段代码，发现了这个奇怪的行为: #include #include #include using namespace std; int main() { map map1;
C++ 线程安全 vector.erase
我为 SFML 编写了一个线程渲染器，它接受指向可绘制对象的指针并将它们存储在一个 vector 中以在每一帧中绘制。开始向 vector 添加对象和从 vector 中删除对象会经常导致段错误 (S
c++ - map::erase:按键删除和迭代器删除之间的区别？
如果我想从 map 中删除单个元素(除了可能的错误检查之外我不关心返回值)，有两种方法可以实现:erase按值键或删除: http://ideone.com/YWocN7 #include #inc

首页

博学

6Ren·AI

商城

javascript - 绘图应用程序 : turn pixels to grayscale or erase them