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

Source: Internet
Author: User
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

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.