HTML5 Implementation of graffiti
Looking at html5, I was amazed by the powerful drawing function. So I wrote a little thing: Graffiti board, which can implement the following functions: drawing, changing colors, and adjusting the paint brush size. html5 plotting can be divided into points, line, surface, circle, image, point, and line are the basis points of all the plane effects. With these two things, there is nothing that cannot be drawn, and there is only an unexpected algorithm. First code: html 1 <body style = "cursor: pointer"> 2 <canvas id = "mycavas" width = "1024" height = "400" style = "border: solid 4px #000000 "> </canvas> <! -- Canvas --> 3 <input type = "color" id = "color1" name = "color1"/> <! -- Color generator --> 4 <output name = "a" for = "color1" onforminput = "innerHTML = color1.value"> </output> 5 <input type = "range" name = "points" id = "size" min = "5" max = "20"/> <! -- Drag a bar --> 6 </body>: Well, a simple drawing interface is ready. Below we start to write some code to copy the Code 1 $. draw ={}; 2 $. extend ($. draw, {3 D2: "", 4 CX: "", 5 Box: "mycavas", // canvas id 6 BoxObj: function () {// canvas object 7 this. CX = document. getElementById (this. box); 8}, 9 D2: function () {// 2d drawing object 10 this. d2 = this. CX. getContext ("2d"); 11}, 12 Cricle: function (x, y, r, color) {// circle 13 if (this. d2) {14 this. d2.beginPath (); 15 this. d2.arc (x, y, r, 0, Math. PI * 2, True); 16 this. d2.closePath (); 17 if (color) {18 this. d2.fillStyle = color; 19} 20 this. d2.fill (); 21} 22}, 23 init: function () {// initialize 24 this. boxObj (); 25 this. d2 (); 26} 27 28}) copy the code. I believe you can understand the simple code here. It mainly involves creating an object, including creating a canvas and a 2d Object, circle Method, and object initialization method. Next, the front-end html page will call this object to see the code: copy the Code 1 var color = "#000000"; // initialize the color 2 var size = 5; // initialize the size 3 document. getElementById ('color1 '). onchange = function () {4 color = this. value; 5}; 6 document. getElementById ('SIZE '). onchange = function () {7 size = this. value; 8}; 9 $. draw. init (); // initialize 10 var tag = false; // control the current state of the mouse and enable the ink switch. 11 var current = {}; // store the point 12 document when the mouse is pressed. onmousedown = function (option) {// press the mouse to event 13 current. x = option. x; 14 current. y = option. y; 15 $. draw. cricle (option. x, option. y, size, color); 16 tag = true; 17} 18 document. onmouseup = function () {// move the mouse up event 19 tag = false; 20} 21 document. onmousemove = function (option) {// move the cursor to event 22 if (tag) {23 if (size> = 0) {24 $. draw. cricle (option. x, option. y, size, color); 25} 26} 27}
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
