如何为html5画布添加喷漆工具？

Question

Currently I have made a pencil tool work and changed the pencil colour, but I would like to add a spray paint tool which lets you draw onto a canvas and also change the spray paint colour.

This is part of the JavaScript for the spray paint tool I have tried implementing, but I can't manage to make it work.

//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);
}

You can see the full code here .

If anyone can help it will most appreciated.

Answer 1

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

In your HTML you had some javascript code in your option values. They need to be changed to this:

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

In the JS I just moved the code snippet you already provided to inside the spray object.

//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);
    }

Answer 2

Here's my attempt. Added the following code:

  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();
      }

    }
  };

---

First, we extend the "pencil" tool, since only the mousemove function differs. We do that by creating an instance of the pencil tool and using it as the prototype for our spray constructor function. Then we overwrite the mousemove function, as above.

The logic there is pretty simple, just create 20 dots in a square area around the mouse as it moves. It would be better to use a round area, as in your original code, and allow the user to configure some parameters instead of using magic numbers (20 and rand(20) - 10). But, for the sake of simplicity, it is what it is.

---

As mentioned in the other answer, options needed to be changed like so:

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

---

Here's a cool barbed wire thing too, just for fun.

  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