JS+HTML5 Canvas implementation of the graffiti artboard effects, adjustable brush color | thickness | Eraser, you can save graffiti effect for image coding, very suitable for learning HTML5 canvas, must support HTML5 browser to see the effect.
<!doctype html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>javascript combined with HTML5 canvas implementation of the graffiti board-sharing javascript-sharejs.com</title>
<meta name= "Copyright" content= "javascript sharing network http://www.sharejs.com/"/>
<meta name= "description" content= "JavaScript combines HTML5 canvas implemented graffiti board, JavaScript sharing network, JS script, Web effects, page templates, PNG icons, vector graphics downloads"/ >
<meta content= "JavaScript, sharing, JavaScript code, ajax,jquery, Web Template, PNG icon, vector map" name= "keywords"/>
<body>
<style>
*{margin:0;padding:0;}
. fa{width:740px;margin:0 Auto;}
. top{margin:20px 0;}
. Top input{width:25px;height:25px;border:1px Solid #fff border-radius:4px;background: #ddd;}
. Top. I1{background: #000000;}
. Top. I2{background: #FF0000;}
. Top. I3{background: #80FF00;}
. Top. I4{background: #00FFFF;}
. Top. I5{background: #808080;}
. Top. I6{background: #FF8000;}
. Top. I7{background: #408080;}
. Top. I8{background: #8000FF;}
. Top. I9{background: #CCCC00;}
#canvas {background: #eee; cursor:default;}
. Font input{font-size:14px;}
. Top. Grea{background: #aaa;}
</style>
<body>
<div class= "FA" >
<div class= "Top" >
<div id= "Color" >
Please select a brush color:
<input class= "I1" type= "button" value= ""/>
<input class= "i2" type= "button" value= ""/>
<input class= "i3" type= "button" value= ""/>
<input class= "I4" type= "button" value= ""/>
<input class= "i5" type= "button" value= ""/>
<input class= "I6" type= "button" value= ""/>
<input class= "i7" type= "button" value= ""/>
<input class= "i8" type= "button" value= ""/>
<input class= "I9" type= "button" value= ""/>
</div>
<div class= "Font" id= "Font" >
Please select the width of the brush:
<input type= "button" value= "thin"/>
<input type= "button" value= "class=" Grea "/>"
<input type= "button" value= "thick"/>
</div>
<div>
<span id= "Error" > If there is an error, please use the eraser:</span>
<input id= "Eraser" style= "WIDTH:60PX;FONT-SIZE:14PX;" Type= "button" value= "Eraser"/>
</div>
<input id= "Clear" type= "button" value= "Clears canvas" style= "width:80px;" />
<input id= "Revocation" type= "button" value= "revoke" style= "width:80px;" />
<input id= "Imgurl" type= "button" value= "Export picture path" style= "width:80px;" />
</div>
<canvas id= "Canvas" width= "740" height= "420" > your browser does not support canvas tags </canvas>
<div id= "Div1" ></div>
</div>
<div id= "html" >
</div>
<script>
(function () {
var paint={
Init:function ()
{
This.load ();
},
Load:function ()
{
this.x=[];//record mouse Movement x coordinates
this.y=[];//record the y-coordinate of the mouse movement
This.clickdrag=[];
this.lock=false;//Mouse before moving to determine if the mouse is pressed
This.iseraser=false;
This. timer=null;//Eraser Start Timer
this.radius=5;
This.storagecolor= "#000000";
this.eraserradius=15;//Erase Radius value
this.color=["#000000", "#FF0000", "#80FF00", "#00FFFF", "#808080", "#FF8000", "#408080", "#8000FF", "#CCCC00"];//Brush color values
this.fontweight=[2,5,8];
This.$=function (ID) {return typeof id== "string"? document.getElementById (ID): ID;
this.canvas=this.$ ("Canvas");
if (This.canvas.getContext) {
} else {
Alert ("Your browser does not support canvas tags");
Return
}
This.cxt=this.canvas.getcontext (' 2d ');
This.cxt.lineJoin = "Round";//context.linejoin-Specifies how two segments are connected
This.cxt.lineWidth = width of 5;//line
this.iptclear=this.$ ("clear");
this.revocation=this.$ ("revocation");
this.imgurl=this.$ ("Imgurl");//Picture Path button
this.w=this.canvas.width;//the width of the canvas
this.h=this.canvas.height;//the height of the canvas
This.touch = ("Createtouch" in document);//Decide whether to be a handheld device
This. Startevent = This.touch? "Touchstart": "MouseDown";//support touch using appropriate event substitution
This. Moveevent = This.touch? "Touchmove": "MouseMove";
This. EndEvent = This.touch? "Touchend": "MouseUp";
This.bind ();
},
Bind:function ()
{
var t=this;
/* Clear Canvas * *
This.iptclear.onclick=function ()
{
T.clear ();
};
/* Mouse press event, record mouse position, and draw, unlock lock, open MouseMove event
this.canvas[' on ' +t.startevent]=function (e)
{
var touch=t.touch? E.touches[0]: E;
var _x=touch.clientx-touch.target.offsetleft;//the x-coordinate of the mouse on the canvas, starting with the upper-left corner of the canvas
var _y=touch.clienty-touch.target.offsettop;//the y-coordinate of the mouse on the canvas, starting with the upper-left corner of the canvas
if (T.iseraser)
{
/*
T.cxt.globalcompositeoperation = "Destination-out";
T.cxt.beginpath ();
T.cxt.arc (_x, _y,t.eraserradius, 0, Math.PI * 2);
T.cxt.strokestyle = "Rgba (250,250,250,0)";
T.cxt.fill ();
T.cxt.globalcompositeoperation = "Source-over";
*/
T.reseteraser (_x,_y,touch);
}else
{
T.movepoint (_x,_y)//record mouse position
T.drawpoint ()//Draw route
}
T.lock=true;
};
/* Mouse Mobile Event
this.canvas[' on ' +t.moveevent]=function (e)
{
var touch=t.touch? E.touches[0]: E;
if (T.lock)//t.lock is true, executes the
{
var _x=touch.clientx-touch.target.offsetleft;//the x-coordinate of the mouse on the canvas, starting with the upper-left corner of the canvas
var _y=touch.clienty-touch.target.offsettop;//the y-coordinate of the mouse on the canvas, starting with the upper-left corner of the canvas
if (T.iseraser)
{
if (T.timer) clearinterval (T.timer);
T.timer=setinterval (function () {
T.reseteraser (_x,_y,touch);
},10);
}
Else
{
T.movepoint (_x,_y,true)//record mouse position
T.drawpoint ()//Draw route
}
}
};
this.canvas[' on ' +t.endevent]=function (e)
{
/* Reset Data * *
T.lock=false;
T.x=[];
T.y=[];
T.clickdrag=[];
Clearinterval (T.timer);
T.timer=null;
};
This.revocation.onclick=function ()
{
T.redraw ();
};
This.changecolor ();
This.imgurl.onclick=function ()
{
T.geturl ();
};
* * Eraser */
this.$ ("Eraser"). Onclick=function (E)
{
T.iseraser=true;
t.$ ("Error"). style.color= "Red";
t.$ ("Error"). Innerhtml= "You have used the eraser!" ";
};
},
Movepoint:function (x,y,dragging)
{
/* Add mouse coordinates to their corresponding array.
This.x.push (x);
This.y.push (y);
This.clickDrag.push (y);
},
Drawpoint:function (X,y,radius)
{
for (Var i=0 i < this.x.length; i++)/loop array
{
This.cxt.beginPath ();//context.beginpath (), ready to draw a path
if (This.clickdrag[i] && i) {//when it is dragged and i!=0, draw the line from the previous point.
This.cxt.moveTo (This.x[i-1], this.y[i-1]),//context.moveto (x, y), opens a new path, and specifies the starting point of the path
}else{
This.cxt.moveTo (This.x[i]-1, this.y[i]);
}
This.cxt.lineTo (This.x[i], this.y[i]);//context.lineto (x, y), connecting the current point with a specified point with a straight path
This.cxt.closePath ();//context.closepath (), close it if the current path is open
This.cxt.stroke ();//context.stroke (), drawing the current path
}
},
Clear:function ()
{
This.cxt.clearRect (0, 0, THIS.W, this.h);/clear canvas, upper left corner as starting point
},
Redraw:function ()
{
/* Cancel * *
This.cxt.restore ();
},
Preventdefault:function (e) {
/* Block Default */
var touch=this.touch? E.touches[0]: E;
if (This.touch) Touch.preventdefault ();
else Window.event.returnValue = false;
},
Changecolor:function ()
{
/* Add event for button/*
var t=this,iptnum=this.$ ("Color"). getElementsByTagName ("input"), fontiptnum=this.$ ("Font"). getElementsByTagName ( "Input");
for (Var i=0,l=iptnum.length;i<l;i++)
{
Iptnum[i].index=i;
Iptnum[i].onclick=function ()
{
T.cxt.save ();
T.cxt.strokestyle = T.color[this.index];
T.storagecolor=t.color[this.index];
t.$ ("Error"). style.color= "#000";
t.$ ("Error"). innerhtml= "If there are errors, please use the eraser:";
T.cxt.strokestyle = T.storagecolor;
T.iseraser=false;
}
}
for (Var i=0,l=fontiptnum.length;i<l;i++)
{
T.cxt.save ();
Fontiptnum[i].index=i;
Fontiptnum[i].onclick=function ()
{
T.changebackground (This.index);
T.cxt.linewidth = T.fontweight[this.index];
t.$ ("Error"). style.color= "#000";
t.$ ("Error"). innerhtml= "If there are errors, please use the eraser:";
T.iseraser=false;
T.cxt.strokestyle = T.storagecolor;
}
}
},
Changebackground:function (num)
{
/* Add brush thickness hint background color switch, gray to current * *
var fontiptnum=this.$ ("Font"). getElementsByTagName ("input");
for (Var j=0,m=fontiptnum.length;j<m;j++)
{
Fontiptnum[j].classname= "";
if (j==num) fontiptnum[j].classname= "Grea";
}
},
Geturl:function ()
{
this.$ ("HTML"). Innerhtml=this.canvas.todataurl ();
},
Reseteraser:function (_x,_y,touch)
{
/* Use eraser-Reminder */
var t=this;
This.cxt.lineWidth = 30;
/*source-over by default, the intersecting part is covered by the fill (color, gradient, texture) of the later drawing graphics, all browsers pass the * *
T.cxt.globalcompositeoperation = "Destination-out";
T.cxt.beginpath ();
T.cxt.arc (_x, _y, T.eraserradius, 0, Math.PI * 2);
T.cxt.strokestyle = "Rgba (250,250,250,0)";
T.cxt.fill ();
T.cxt.globalcompositeoperation = "Source-over"
}
};
Paint.init ();
})();
</script>
<div style= "Clear:both" ></div>
</body>
