1, the development of online drawing board
(1) After the page is loaded, we get the <canvas> object and add some processing functions for it to handle JavaScript events caused by different mouse actions: onmousedown, onmouseup, onmouseout, OnMouseMove
(2) Two toolbars above the canvas to select the stroke color and stroke thickness. Clicking inside the element invokes the corresponding binding method, which sets the Strokestyle property to a different color, or sets the LineWidth property to a different thickness.
The online demo is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>Paint</title>
<link rel= "stylesheet" href= "Paint.css" >
<script>
var canvas;
var context;
Class
Window.onload = function () {
Get canvas already drawing context
Canvas = document.getElementById ("Drawingcanvas");
Context = Canvas.getcontext ("2d");
Canvas Add mouse Event
Canvas.onmousedown = startdrawing;
Canvas.onmouseup = stopdrawing;
Canvas.onmouseout = stopdrawing;
Canvas.onmousemove = Draw;
};
Record whether the current is drawing
var isdrawing = false;
Start drawing
function Startdrawing (e) {
Isdrawing = true;
To create a new drawing path
Context.beginpath ();
Move the brush to the mouse position
Context.moveto (E.pagex-canvas.offsetleft, e.pagey-canvas.offsettop);
}
Stop drawing
function stopdrawing () {
Isdrawing = false;
}
In Paint
function Draw (e) {
if (isdrawing = = True) {
Find the latest location of the mouse
var x = E.pagex-canvas.offsetleft;
var y = e.pagey-canvas.offsettop;
Draw a straight line to the latest position of the mouse
Context.lineto (x, y);
Context.stroke ();
}
}
To save the brush element label for the previously selected color
var previouscolorelement;
Change the color of a brush
function ChangeColor (color, imgelement) {
Context.strokestyle = color;
Sets the element label for the current brush to the selected style
Imgelement.classname = "Selected";
Restores the element label of the previous brush to the default style
if (previouscolorelement!= null) Previouscolorelement.classname = "";
Previouscolorelement = imgelement;
}
The brush element label for the thickness you selected before
var previousthicknesselement;
Change brush thickness
function changethickness (thickness, imgelement) {
Context.linewidth = thickness;
Sets the element label for the current brush to the selected style
Imgelement.classname = "Selected";
Restores the element label of the previous brush to the default style
if (previousthicknesselement!= null) Previousthicknesselement.classname = "";
Previousthicknesselement = imgelement;
}
Clear Canvas
function Clearcanvas () {
Context.clearrect (0, 0, canvas.width, canvas.height);
}
Save Canvas
function Savecanvas () {
Find the element label for the preview
var imagecopy = document.getElementById ("savedimagecopy");
Display the canvas contents in an IMG element
IMAGECOPY.SRC = Canvas.todataurl ();
Show tips for saving right key
var Imagecontainer = document.getElementById ("Savedcopycontainer");
ImageContainer.style.display = "block";
}
</script>
<body>
<div class= "Toolbar" >
-Color-<br>
</div>
<div class= "Toolbar" >
-Thickness-<br>
</div>
<div class= "Canvascontainer" >
<canvas id= "Drawingcanvas" width= "height=" ></canvas>
</div>
<div class= "Toolbar" >
-Operation-<br>
<button onclick= "Savecanvas ()" > Save Image </button>
<button onclick= "Clearcanvas ()" > Clear Image </button>
<div id= "Savedcopycontainer" >
<br>
Use the right key to save the image ...
</div>
</div>
</body>
---paint.css---
Body {
Background:white;
}
. Toolbar {
Float:left;
font-family: ' Trebuchet MS ';
font-size:14px;
Font-variant:small-caps;
Text-align:center;
Background: #F2F7FE;
padding:10px 15px 3px 10px;
margin-bottom:1px;
margin-right:1px;
border:1px solid #7B899B;
}
. Toolbar button {
padding:6px;
MARGIN:7PX 2px;
Font-variant:normal;
font-size:12px;
}
. Canvascontainer {
Clear:both;
}
Canvas {
border:1px solid #7B899B;
}
IMG {
padding:2px;
border:2px solid #F2F7FE;
}
Img:hover {
BORDER:2PX Groove #E4F0FE;
Background:white;
}
Img. Selected {
BORDER:2PX Groove #E4F0FE;
}
#savedCopyContainer {
Display:none;
}
#savedCopyContainer img {
width:250px;
height:125px;
}
2, save the canvas as an image
(1) Invoking the <canvas> Todataurl () method, the canvas image data can be converted to a character sequence and encoded as a data URL.
1
var url = canvas.todataurl ();
(2) Todataurl () method if no arguments are provided, the resulting will be a PNG picture. If you want a picture in another format, you can pass in the appropriate MIME type.
1
var url = canvas.todataurl ("Image/jpeg");
(3) The data URL is a base-64 encoded string that begins with Data:image/png;base64.
data:image/png;base64,ivborw0kggoaaaansuheugaaaa0aaaancayaaaby6% 2br8aaaaleleqvr42owqqrheiaxf10elvaisvgo3bcabcuhyczwahepaqpod6bzjhnndo0dyya8fexkppxyvcplvidufyqviqn9jfmy637hrlcysfaul21e7k vwbaigx56rnslqc5kpxslo3kysalphtygfhrdtfc09eismezjsgbj7qveh3ojw89syimih%2bio2bojx0xwa2% 2bqel4pahsx4abqaaaabjru5erkjggg%3d%3d
(4) The data URL is very suitable for transmission of images, in addition to the Web server can be sent to save in the background, can also be used as a element src attribute value displayed.
Find the element label for the preview
var imagecopy = document.getElementById ("savedimagecopy");
Display the canvas contents in an IMG element
IMAGECOPY.SRC = Canvas.todataurl ();
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
