Javascript-based graffiti with html5 canvas (adjustable paint brush color/width/eraser)

Source: Internet
Author: User

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>
Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.