Home > Developer > JavaScript
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.
Copy codeThe Code is as follows:
<! Doctype html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> javascript with html5 canvas Implementation of graffiti-sharing JavaScript-sharejs.com </title>
<Meta name = "Copyright" content = "JavaScript sharing network http://www.sharejs.com/"/>
<Meta name = "description" content = "javascript: graffiti with html5 canvas, JavaScript sharing network, js scripts, webpage special effects, webpage templates, png icons, and vector image downloads"/>
<Meta content = "JavaScript, sharing, JavaScript code, Ajax, jQuery, webpage templates, PNG icons, vector graphs" name = "keywords"/>
</Head>
<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: #00 FFFF ;}
. 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>
</Head>
<Body>
<Div class = "fa">
<Div class = "top">
<Div id = "color">
Select the paint 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">
Select the width of the paint brush:
<Input type = "button" value = ""/>
<Input type = "button" value = "medium" class = "grea"/>
<Input type = "button" value = "bold"/>
</Div>
<Div>
<Span id = "error"> if an error occurs, use an eraser: </span>
<Input id = "eraser" style = "width: 60px; font-size: 14px;" type = "button" value = "eraser"/>
</Div>
<Input id = "clear" type = "button" value = "clear canvas" style = "width: 80px;"/>
<Input id = "revocation" type = "button" value = "undo" style = "width: 80px;"/>
<Input id = "imgurl" type = "button" value = "export image path" style = "width: 80px;"/>
</Div>
<Canvas id = "canvas" width = "740" height = "420"> canvas labels are not supported in your browser. </canvas>
<Div id = "div1"> </div>
</Div>
<Div id = "html">
</Div>
<Script>
(Function (){
Var paint = {
Init: function ()
{
This. load ();
},
Load: function ()
{
This. x = []; // records the X coordinates 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 the mouse is pressed
This. isEraser = false;
// This. Timer = null; // The eraser starts the 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 the 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. width; // obtain the width of the canvas.
This. h = this. canvas. height; // obtain the height of the canvas.
This. touch = ("createTouch" in document); // determines whether it is a handheld device.
This. StartEvent = this. touch? "Touchstart": "mousedown"; // you can use the corresponding event in touch mode.
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 ();
};
/* Press the mouse to 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; // The 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 on 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 cursor */
This. canvas ['on' + t. MoveEvent] = function (e)
{
Var touch = t. touch? E. touches [0]: e;
If (t. lock) // if t. lock is true, the execution is performed.
{
Var _ x = touch. clientX-touch.tar get. offsetLeft; // The 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 on 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 you drag 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, close 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 the 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 an event for the 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 an error occurs, 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 an error occurs, use the eraser :";
T. isEraser = false;
T. cxt. strokeStyle = t. storageColor;
}
}
},
ChangeBackground: function (num)
{
/* If you add a paint brush width, the background color is switched to the current color */
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 an eraser-reminder */
Var t = this;
// This. cxt. lineWidth = 30;
/* Source-over default. The intersection part is overwritten by the filling (color, gradient, texture) of the drawing after it is drawn. all browsers pass through */
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>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
