Based on javascripthtml5canvas, you can adjust the color, width, and rubber of the paint brush.

Special effects of graffiti canvas implemented by js + html5canvas, adjustable paint brush color | width | eraser, which can save the graffiti effect as image encoding. It is very suitable for learning the canvas of html5, you must support html5 browsers to see the effect. Special effects of graffiti canvas implemented by js + html5 canvas, adjustable paint brush color | width | eraser, which can save the graffiti effect as image encoding. It is very suitable for learning the canvas of html5, you must support html5 browsers to see the effect.

  
  Graffiti implemented by javascript combined with html5 canvas 
  
  
       
 
 
Select the paint color:         
 
Select the width of the paint brush:   
 
If any error occurs, use the eraser: 
    
 
 
  
Your browser does not support canvas labels.
  
 
 
 
Script (function () {var paint = {init: function () {this. load () ;}, load: function () {this. x = []; // records the X coordinate of the mouse movement. this. y = []; // records the Y coordinate of the mouse movement. this. clickDrag = []; this. lock = false; // before moving the mouse, determine whether to press this. isEraser = false; // this. timer = null; // eraser start Timer // this. radius = 5; this. storageColor = "#000000"; this. eraserRadius = 15; // erase the radius value this. color = ["#000000", "# FF0000", "#80FF00", "#00 FFFF", "#808080", "# FF8000", "#408080 ", "# 8000FF "," # CCCC00 "]; // paint brush color value 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 labels"); return;} this. cxt = this. canvas. getContext ('2d '); this. cxt. lineJoin = "round"; // context. lineJoin-specify the connection mode of two line segments this. cxt. lineWidth = 5; // The width of the line this. iptClear = this. $ ("clear"); this. revocation = this. $ ("revocation"); this. imgurl = this. $ ("imgurl"); // The image path button this. w = this. canvas. wi Dth; // obtain the width of the canvas. this. h = this. canvas. height; // obtain the height of the canvas. this. touch = ("createTouch" in document); // determines whether the device is a handheld device. startEvent = this. touch? "Touchstart": "mousedown"; // you can use the corresponding event to replace this. MoveEvent = this. touch? "Touchmove": "mousemove"; this. EndEvent = this. touch? "Touchend": "mouseup"; this. bind () ;}, bind: function () {var t = this;/* clear the canvas */this. iptClear. onclick = function () {t. clear () ;};/* click the event, record the mouse position, draw, unlock the lock, and open the mousemove event */this. canvas ['on' + t. startEvent] = function (e) {var touch = t. touch? E. touches [0]: e; var _ x = touch. clientX-touch.tar get. offsetLeft; // x coordinate of the mouse over the canvas, starting from the upper left corner of the canvas var _ y = touch. clientY-touch.tar get. offsetTop; // y coordinate of the mouse over the canvas, starting from 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 the mouse position t. drawPoint (); // draw the route} t. lock = true;};/* move the mouse event */this. canvas ['on' + t. moveEvent] = function (e) {var touch = t. touch? E. touches [0]: e; if (t. lock) // t. if lock is true, run {var _ x = touch. clientX-touch.tar get. offsetLeft; // x coordinate of the mouse over the canvas, starting from the upper left corner of the canvas var _ y = touch. clientY-touch.tar get. offsetTop; // y coordinate of the mouse over the canvas, starting from 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 the mouse position t. drawPoint (); // draw the 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 an eraser! ";};}, MovePoint: function (x, y, dragging) {/* Add the mouse coordinates to the 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 (), prepare to draw a path if (this. clickDrag [I] & I) {// when it is dragged and I! When it is set to 0, draw a line from the previous vertex. This. cxt. moveTo (this. x [I-1], this. y [I-1]); // context. moveTo (x, y), a new path, and specify the path start point} else {this. cxt. moveTo (this. x [I]-1, this. y [I]);} this. cxt. lineTo (this. x [I], this. y [I]); // context. lineTo (x, y) connects the current vertex with the specified vertex using a straight path. this. cxt. closePath (); // context. closePath (). If the current path is open, disable it this. cxt. stroke (); // context. stroke (), draw the current path }}, clear: function () {this. cxt. clearRect (0, 0, this. w, this. h); // clear the canvas. The upper left corner is Start Point}, redraw: function () {/* undo */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
 
  
  
 

Related Articles:

6 hand-painted graffiti button effects based on pure CSS3

How to Use html5 and css3 to complete google graffiti Animation

Example code of Html5 simple implementation of graffiti