cách thêm công cụ phun sơn cho html5 canvas?

Question

Hiện tại tôi đã thực hiện công cụ bút chì và thay đổi màu bút chì, nhưng tôi muốn thêm công cụ phun sơn cho phép bạn vẽ lên canvas và cũng thay đổi màu sơn phun.

Đây là một phần của JavaScript cho công cụ phun sơn tôi đã thử triển khai, nhưng tôi không thể quản lý để làm cho nó hoạt động.

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

Bạn có thể xem mã đầy đủ here.

Nếu có ai có thể giúp nó đánh giá cao nhất.

Answer 1

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

Trong HTML của bạn, bạn đã có một số mã javascript trong các giá trị tùy chọn của bạn. Họ cần phải được thay đổi thành điều này:

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

Trong JS tôi vừa di chuyển đoạn mã bạn đã cung cấp bên trong đối tượng phun.

//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

Đây là nỗ lực của tôi. Thêm vào đoạn mã sau:

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

    } 
    }; 

---

tiên, chúng ta mở rộng "bút chì" công cụ, vì chỉ mousemove chức năng khác. Chúng tôi làm điều đó bằng cách tạo một thể hiện của công cụ bút chì và sử dụng nó làm mẫu thử nghiệm cho hàm tạo hàm spray của chúng tôi. Sau đó, chúng tôi ghi đè lên chức năng mousemove, như trên.

Logic có khá đơn giản, chỉ cần tạo 20 chấm trong một khu vực hình vuông xung quanh chuột khi di chuyển. Nó sẽ là tốt hơn để sử dụng một khu vực tròn, như trong mã ban đầu của bạn, và cho phép người dùng cấu hình một số thông số thay vì sử dụng số ma thuật (20 và rand (20) - 10). Nhưng, vì lợi ích của sự đơn giản, nó là những gì nó được.

---

Như đã đề cập trong câu trả lời khác, tùy chọn cần phải được thay đổi như sau:

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

---

Dưới đây là một mát gai dây điều quá, chỉ để cho vui.

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