Home > Developer > Web Develop
Reprinted please indicate the source: http://blog.csdn.net/lmj623565791/article/details/34089553
Today, we will give you a small example ~ If you are interested in using HTML5 canvas, you can change it to android or another version ~
:
Paste a million picture of me. How can this problem be solved ~
Well, the following principle begins:
1. Two canvases in the scratch area. One is front and the other is back. The front covers the Canvas below.
2. the canvas is filled with a rectangle by default. The canvas below is overwritten, And the mouse event is monitored. The rectangle area on the front canvas is wiped out based on the x and y coordinates of the mousemove, the following canvas is displayed.
Easy to understand ~ Hey hey ~
1. HTML file content:
<!DOCTYPE html>
2. First, I used a canvas helper class that I previously wrote, and left some methods to use today:
/*** Created with JetBrains WebStorm. * User: zhy * Date: 13-12-17 * Time: * To change this template use File | Settings | File Templates. */function Canvas2D ($ canvas) {var context = $ canvas [0]. getContext ("2d"), width = $ canvas [0]. width, height = $ canvas [0]. height, pageOffset = $ canvas. offset (); context. font = "24px Verdana, Geneva, sans-serif"; context. textBaseline = "top";/*** draw a rectangle * @ param start * @ param end * @ param isFill */this. drawRect = function (start, end, isFill) {var w = end. x-start. x, h = end. y-start. y; if (isFill) {context. fillRect (start. x, start. y, w, h);} else {context. strokeRect (start. x, start. y, w, h) ;}};/*** based on the written text, obtain the coordinates * @ param text * @ returns {x: number, y: number} */this in the upper-left corner of the text written on the canvas. caculateTextCenterPos = function (text) {var metrics = context. measureText (text); console. log (metrics); // context. font = fontSize + "px Verdana, Geneva, sans-serif"; var textWidth = metrics. width; var textHeight = parseInt (context. font); return {x: width/2-textWidth/2, y: height/2-textHeight/2};} this. width = function () {return width;} this. height = function () {return height;} this. resetOffset = function () {pageOffset = $ canvas. offset ();}/*** when the screen size changes, recalculate the offset */$ (window ). resize (function () {pageOffset = $ canvas. offset () ;});/*** converts the left side of the page to the coordinates * @ param pageX * @ param pageY * @ returns {x: number, y: number} */this. getCanvasPoint = function (pageX, pageY) {return {x: pageX-pageOffset. left, y: pageY-pageOffset. top}/*** clear area, this user clicks the scratch coating * @ param start * @ returns {*} */this. clearRect = function (start) {context. clearRect (start. x, start. y, 10, 10); return this ;};/*** draw the text to the center of the canvas * @ param text * @ param fill */this. drawTextInCenter = function (text, fill) {var point = this. caculateTextCenterPos (text); if (fill) {context. fillText (text, point. x, point. y);} else {context. strokeText (text, point. x, point. y) ;}};/***** set the paint width * @ param newWidth * @ returns {*} */this. penWidth = function (newWidth) {if (arguments. length) {context. lineWidth = newWidth; return this;} return context. lineWidth;};/*** set the paint brush color * @ param newColor * @ returns {*} */this. penColor = function (newColor) {if (arguments. length) {context. strokeStyle = newColor; context. fillStyle = newColor; return this;} return context. strokeStyle;};/*** set the font size * @ param fontSize * @ returns {*} */this. fontSize = function (fontSize) {if (arguments. length) {context. font = fontSize + "px Verdana, Geneva, sans-serif"; return this;} return context. fontSize ;}}
This class encapsulates Canvas objects, sets parameters, and draws graphics. This class is simple and can be improved ~3. GuaGuaLe. js
/*** Created with JetBrains WebStorm. * User: zhy * Date: 14-6-24 * Time: am * To change this template use File | Settings | File Templates. */function GuaGuaLe (idFront, idBack) {this. $ eleBack = $ ("#" + idBack); this. $ eleFront = $ ("#" + idFront); this. frontCanvas = new Canvas2D (this. $ eleFront); this. backCanvas = new Canvas2D (this. $ eleBack); this. isStart = false;} GuaGuaLe. prototype = {constru Ctor: GuaGuaLe,/*** combines user-passed parameters with default parameters * @ param desAttr * @ returns {frontFillColor: string, backFillColor: string, backFontColor: string, backFontSize: number, msg: string} */mergeAttr: function (desAttr) {var defaultAttr = {frontFillColor: "silver", backFillColor: "gold", backFontColor: "red ", backFontSize: 24, msg: "Thank you for your patronage"}; for (var p in desAttr) {defaultAttr [p] = desAttr [p];} return de FaultAttr;}, init: function (desAttr) {var attr = this. mergeAttr (desAttr); // initialize canvas this. backCanvas. penColor (attr. backFillColor); this. backCanvas. fontSize (attr. backFontSize); this. backCanvas. drawRect ({x: 0, y: 0}, {x: this. backCanvas. width (), y: this. backCanvas. height ()}, true); this. backCanvas. penColor (attr. backFontColor); this. backCanvas. drawTextInCenter (attr. msg, true); // initialize canvas this. fr OntCanvas. penColor (attr. frontFillColor); this. frontCanvas. drawRect ({x: 0, y: 0}, {x: this. frontCanvas. width (), y: this. frontCanvas. height ()}, true); var _ this = this; // sets the event this. $ eleFront. mousedown (function (event) {_ this. mouseDown (event );}). mousemove (function (event) {_ this. mouseMove (event );}). mouseup (function (event) {_ this. mouseUp (event) ;}) ;}, mouseDown: function (event) {this. isStart = True; this. startPoint = this. frontCanvas. getCanvasPoint (event. pageX, event. pageY) ;}, mouseMove: function (event) {if (! This. isStart) return; var p = this. frontCanvas. getCanvasPoint (event. pageX, event. pageY); this. frontCanvas. clearRect (p) ;}, mouseUp: function (event) {this. isStart = false ;}};
The two canvas IDs passed by the user are used to generate an object, perform initialization, and set events. Of course, you can also set optional parameters, colors, and information displayed after scratch {
FrontFillColor: "silver ",
BackFillColor: "gold ",
BackFontColor: "red ",
BackFontSize: 24,
Msg: "Thank you for your patronage"
}; Passed to the init method for setting.Okay, and it's basically finished. Test it:
The basic implementation of the scratch layer, but there is a small problem, that is, when the user slides very fast, there will be some breakpoints, of course, can also be ignored, but we are prepared to provide a solution:
Cause: the breakpoint generated because the mouse moves too fast. Solution: Split the left side of the mouse twice in mousemove into multiple breakpoint coordinates:
For example, connect two points, divide them into multiple segments based on the slope, and obtain the coordinates of the line segments (there are four possibilities. If you are interested, you can draw a picture and calculate it. The Code is as follows):
var k; if (p.x > this.startPoint.x) { k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x); for (var i = this.startPoint.x; i < p.x; i += 5) { this.frontCanvas.clearRect({x: i, y: (this.startPoint.y + (i - this.startPoint.x) * k)}); } } else { k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x); for (var i = this.startPoint.x; i > p.x; i -= 5) { this.frontCanvas.clearRect({x: i, y: (this.startPoint.y + ( i - this.startPoint.x ) * k)}); } } this.startPoint = p;
4. Finally, paste the complete GuaGuaLe. js/*** Created with JetBrains WebStorm. * User: zhy * Date: 14-6-24 * Time: am * To change this template use File | Settings | File Templates. */function GuaGuaLe (idFront, idBack) {this. $ eleBack = $ ("#" + idBack); this. $ eleFront = $ ("#" + idFront); this. frontCanvas = new Canvas2D (this. $ eleFront); this. backCanvas = new Canvas2D (this. $ eleBack); this. isStart = false;} GuaGuaLe. prototype = {constru Ctor: GuaGuaLe,/*** combines user-passed parameters with default parameters * @ param desAttr * @ returns {frontFillColor: string, backFillColor: string, backFontColor: string, backFontSize: number, msg: string} */mergeAttr: function (desAttr) {var defaultAttr = {frontFillColor: "silver", backFillColor: "gold", backFontColor: "red ", backFontSize: 24, msg: "Thank you for your patronage"}; for (var p in desAttr) {defaultAttr [p] = desAttr [p];} return de FaultAttr;}, init: function (desAttr) {var attr = this. mergeAttr (desAttr); // initialize canvas this. backCanvas. penColor (attr. backFillColor); this. backCanvas. fontSize (attr. backFontSize); this. backCanvas. drawRect ({x: 0, y: 0}, {x: this. backCanvas. width (), y: this. backCanvas. height ()}, true); this. backCanvas. penColor (attr. backFontColor); this. backCanvas. drawTextInCenter (attr. msg, true); // initialize canvas this. fr OntCanvas. penColor (attr. frontFillColor); this. frontCanvas. drawRect ({x: 0, y: 0}, {x: this. frontCanvas. width (), y: this. frontCanvas. height ()}, true); var _ this = this; // sets the event this. $ eleFront. mousedown (function (event) {_ this. mouseDown (event );}). mousemove (function (event) {_ this. mouseMove (event );}). mouseup (function (event) {_ this. mouseUp (event) ;}) ;}, mouseDown: function (event) {this. isStart = True; this. startPoint = this. frontCanvas. getCanvasPoint (event. pageX, event. pageY) ;}, mouseMove: function (event) {if (! This. isStart) return; var p = this. frontCanvas. getCanvasPoint (event. pageX, event. pageY); this. frontCanvas. clearRect (p) ;}, mouseUp: function (event) {this. isStart = false ;}};
Reprinted please indicate the source: http://blog.csdn.net/lmj623565791/article/details/34089553
Okay. You can close your meal ~
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
