如何为HTML5 Canvas添加喷漆工具？

Question

目前，我已经使铅笔工具可用，并更改了铅笔颜色，但我希望添加一个喷漆工具，让您可以在画布上绘制并更改喷漆的颜色。

以下是我尝试实现的喷漆工具的JavaScript代码，但我无法使其正常运行。

//spray paint tool
tools.spray = function () {

  var tool = this;
  this.started = false;

  this.mousedown = function (ev) {

    if (!tool.started) {
      return;
    }

    var len = 5 + ( Math.random() * 5 | 0 );

    for( var i = 0; i < len; ++i ) {
      context.beginPath();
      context.strokeStyle = CurrentColor;

      context.arc(
        mouseX + Math.cos( Math.random() * Math.PI * 2 ) * radius * Math.random(),
        mouseY + Math.sin( Math.random() * Math.PI * 2 ) * radius * Math.random(),
        1,
        0, Math.PI * 2, false
      );

      context.fill();
    }
  }, 33);
}

您可以在这里查看完整代码。

如果有人能提供帮助，将不胜感激。

- Super Man

---

SuperMan 遇到了问题 :P :) - Sachin

你的浏览器似乎无法正常工作，使用 Chrome。 - Ronnie

你是在说类似于MSPaint的喷漆工具还是像Photoshop中的喷枪工具？ - Philipp

哦，而且在Opera中也不能工作。 - Philipp

我们不应该在网上寻求这种评估帮助，我会保留这段代码以进行检查。 - user2385484

Answer 1

http://jsbin.com/urubev/9/edit

在你的HTML中，你在选项值中放置了一些JavaScript代码。它们需要更改为以下内容：

<select id="dtool">
     <option value="pencil">Pencil</option>
     <option value="spray">Spray</option>
</select>

在JS中，我只是将您已经提供的代码片段移动到了spray对象的内部。

//These are the variables used throughout the javascript
//var points = new Array();
var outlineImage = new Image();
radius = 15
var colorPurple = "#cb3594"; //variable for purple colour 
var colorGreen = "#659b41"; //variable for green colour 
var colorYellow = "#ffcf33";//variable for yellow colour 
var colorBlack = "#000000";//variable for black colour 
var CurrentColor = colorBlack; //variable for current colour 

//used to change the colour of the drawing tool
function changeColor( color_code ) {
    CurrentColor =color_code;
}


//this function will allow you clear the canvas 
function clearCanvas(){
 context.clearRect(0, 0, canvas.width, canvas.height);
}

if (window.addEventListener) {
    window.addEventListener('load', function () {
        var canvas, context;

          // The active tool instance.
          var tool;
          var tool_default = 'spray';

        function init() {
            // Find the canvas element.
            canvas = document.getElementById('imageView');//this is used to get a element id for 'imageView' the cnavas
            if (!canvas) {
                alert('Error: I cannot find the canvas element!');//if it fails to get the canvas then it will diplay this error
                return;
            }

            if (!canvas.getContext) {
                alert('Error: no canvas.getContext!');//if it fails to get the context then it will diplay this error
                return;
            }


            // Get the 2D canvas context.
            context = canvas.getContext('2d');// used to get canavs context to '2d'
            if (!context) {
                alert('Error: failed to getContext!');//if it fails to get the context then it will diplay this error
                return;
            }

        // Get the tool select input.
    var tool_select = document.getElementById('dtool');
    if (!tool_select) {
      alert('Error: failed to get the dtool element!');
      return;
    }
    tool_select.addEventListener('change', ev_tool_change, false);

    // Activate the default tool.
    if (tools[tool_default]) {
      tool = new tools[tool_default]();
      tool_select.value = tool_default;
    }

            // Attach the mousedown, mousemove and mouseup event listeners.
            canvas.addEventListener('mousedown', ev_canvas, false);
            canvas.addEventListener('mousemove', ev_canvas, false);
            canvas.addEventListener('mouseup', ev_canvas, false);
        }

 // The event handler for any changes made to the tool selector.
  function ev_tool_change (ev) {
    if (tools[this.value]) {
      tool = new tools[this.value]();
    }
  }

   // This object holds the implementation of each drawing tool.
  var tools = {};

        // This painting tool works like a drawing pencil which tracks the mouse
        // movements.
         tools.pencil = function() {
            var tool = this;
            this.started = false;

            // This is called when you start holding down the mouse button.
            // This starts the pencil drawing.
            this.mousedown = function (ev) {
                context.beginPath();
                context.strokeStyle = CurrentColor;
                context.moveTo(ev._x, ev._y);
                tool.started = true;
            };

            // This function is called every time you move the mouse. Obviously, it only
            // draws if the tool.started state is set to true (when you are holding down
            // the mouse button).
            this.mousemove = function (ev) {
                if (tool.started) {
                    context.strokeStyle = CurrentColor;
                    context.lineTo(ev._x, ev._y);                   
                    context.stroke();
                }
            }; 

            // This is called when you release the mouse button.
            this.mouseup = function (ev) {
                if (tool.started) {
                    tool.mousemove(ev);
                    tool.started = false;
                }
            };
        }

         tools.spray = function() {
            var tool = this;
            this.started = false;

            this.mousedown = function (ev) {
                context.beginPath();
                context.strokeStyle = CurrentColor;
                context.moveTo(ev._x, ev._y);
                tool.started = true;
            };

            this.mousemove = function (ev) {
                if (tool.started) {
                    context.strokeStyle = CurrentColor;

                    context.arc(
                        ev._x + Math.cos( Math.random() * Math.PI * 2 ) * radius * Math.random(),
                        ev._y + Math.sin( Math.random() * Math.PI * 2 ) * radius * Math.random(),
                        1,
                        0, Math.PI * 2, false
                    );
                    context.fill();
                }
            };

            this.mouseup = function (ev) {
                if (tool.started) {
                    tool.mousemove(ev);
                    tool.started = false;
                }
            };
        }           

        // The general-purpose event handler. This function just determines the mouse
        // position relative to the canvas element.
        function ev_canvas(ev) {
            if (navigator.appName == 'Microsoft Internet Explorer' || navigator.vendor == 'Google Inc.' || navigator.vendor == 'Apple Computer, Inc.') { // IE or Chrome
                ev._x = ev.offsetX;
                ev._y = ev.offsetY;
            } else if (ev.layerX || ev.layerX == 0) { // Firefox
                ev._x = ev.layerX - this.offsetLeft;
                ev._y = ev.layerY - this.offsetTop;
            } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                ev._x = ev.offsetX;
                ev._y = ev.offsetY;
            }
            // Call the event handler of the tool.
            var func = tool[ev.type];
            if (func) {
                func(ev);
            }
           // points.push(ev);
        }

        init();

    }, false);
    }

- Bemmu

---

你能解释一下你添加、删除或更改了什么吗？当代码本身不够自说明时，我们不鼓励只回答代码。 - Patashu

Answer 2

这是我的尝试。添加了以下代码：

  tools.spray = function(){};
  tools.spray.prototype = new tools.pencil(); 
  tools.spray.prototype.mousemove = function (ev) {
    if (tool.started) {
      context.fillStyle = CurrentColor;
      context.rect(ev._x, ev._y, 1, 1);     

      for (var i = 20; i--;) { 
        context.rect(ev._x + Math.random() * 20 - 10, 
                     ev._y + Math.random() * 20 - 10, 1, 1);
        context.fill();
      }

    }
  };

---

首先，我们扩展了“铅笔”工具，因为只有 mousemove 函数不同。我们通过创建“铅笔”工具的实例并将其用作我们的 spray 构造函数的原型来实现这一点。然后，我们像上面那样覆盖 mousemove 函数。

那里的逻辑非常简单，只需在鼠标移动时在一个正方形区域内创建 20 个点。最好使用圆形区域，就像您的原始代码中那样，并允许用户配置一些参数，而不是使用奇怪的数字（20 和 rand(20) - 10）。但是，为了简单起见，就是这样。

---

正如其他答案中提到的，需要更改选项如下：

  <option value="pencil">Pencil</option>
  <option value="spray">Spray</option>

这里还有一个很酷的带刺铁丝东西，仅供娱乐之用。

  tools.barb = function(){};
  tools.barb.prototype = new tools.pencil(); 
  tools.barb.prototype.mousemove = function (ev) {
    if (tool.started) {
      context.strokeStyle = CurrentColor;
      context.lineTo(ev._x, ev._y);         
      context.lineTo(ev._x + Math.random() * 20 - 10, 
                     ev._y + Math.random() * 20 - 10);              
      context.stroke();
    }
  };

http://jsbin.com/awiyan/3/edit

- Dagg Nabbit