javascript - how to add spray paint tool for html5 canvas? -
currently have made pencil tool work , changed pencil colour, add spray paint tool lets draw onto canvas , change spray paint colour.
this part of javascript spray paint tool have tried implementing, can't manage make 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 = 0; < 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 full code here.
if can appreciated.
http://jsbin.com/urubev/9/edit
in html had javascript code in option values. need changed this:
<select id="dtool"> <option value="pencil">pencil</option> <option value="spray">spray</option> </select> in js moved code snippet provided inside spray object.
//these variables used throughout javascript //var points = new array(); var outlineimage = new image(); radius = 15 var colorpurple = "#cb3594"; //variable purple colour var colorgreen = "#659b41"; //variable green colour var coloryellow = "#ffcf33";//variable yellow colour var colorblack = "#000000";//variable black colour var currentcolor = colorblack; //variable current colour //used change colour of drawing tool function changecolor( color_code ) { currentcolor =color_code; } //this function allow clear canvas function clearcanvas(){ context.clearrect(0, 0, canvas.width, canvas.height); } if (window.addeventlistener) { window.addeventlistener('load', function () { var canvas, context; // active tool instance. var tool; var tool_default = 'spray'; function init() { // find canvas element. canvas = document.getelementbyid('imageview');//this used element id 'imageview' cnavas if (!canvas) { alert('error: cannot find canvas element!');//if fails canvas diplay error return; } if (!canvas.getcontext) { alert('error: no canvas.getcontext!');//if fails context diplay error return; } // 2d canvas context. context = canvas.getcontext('2d');// used canavs context '2d' if (!context) { alert('error: failed getcontext!');//if fails context diplay error return; } // tool select input. var tool_select = document.getelementbyid('dtool'); if (!tool_select) { alert('error: failed dtool element!'); return; } tool_select.addeventlistener('change', ev_tool_change, false); // activate default tool. if (tools[tool_default]) { tool = new tools[tool_default](); tool_select.value = tool_default; } // attach mousedown, mousemove , mouseup event listeners. canvas.addeventlistener('mousedown', ev_canvas, false); canvas.addeventlistener('mousemove', ev_canvas, false); canvas.addeventlistener('mouseup', ev_canvas, false); } // event handler changes made tool selector. function ev_tool_change (ev) { if (tools[this.value]) { tool = new tools[this.value](); } } // object holds implementation of each drawing tool. var tools = {}; // painting tool works drawing pencil tracks mouse // movements. tools.pencil = function() { var tool = this; this.started = false; // called when start holding down mouse button. // starts pencil drawing. this.mousedown = function (ev) { context.beginpath(); context.strokestyle = currentcolor; context.moveto(ev._x, ev._y); tool.started = true; }; // function called every time move mouse. obviously, // draws if tool.started state set true (when holding down // mouse button). this.mousemove = function (ev) { if (tool.started) { context.strokestyle = currentcolor; context.lineto(ev._x, ev._y); context.stroke(); } }; // called when release 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; } }; } // general-purpose event handler. function determines mouse // position relative 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 event handler of tool. var func = tool[ev.type]; if (func) { func(ev); } // points.push(ev); } init(); }, false); }
Comments
Post a Comment