On the basis of the last time, added some codes, the mobile terminal can be operated
Visit URL: https://chandler712.github.io/Item/
<!-- 简单版画板 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单版画板</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body,div,canvas,h5,input,ul,li,p,button{
margin: 0px;
padding: 0px;
position: relative;
}
#mycanvas{
margin: 5px;
}
#content{
margin: 5px auto;
width: 700px;
height: 510px;
border: 1px solid gray;
}
#canvas_selector{
position: absolute;
margin-left: 505px;
margin-top: -512px;
height: 500px;
width: 190px;
border:1px solid black;
}
.title{
text-align: center;
margin-bottom: 10px;
}
ul li{
list-style-type: none;
margin: 10px 30px 10px 20px;
display: block;
float: left;
width: 40px;
height: 20px;
background:greenyellow;
cursor: pointer;
border: 1px solid gray;
}
#canvas_color,#canvas_brush,#canvas_control,#canvasImage{
margin:50px 0 50px 0;
}
#canvas_brush{
height: 80px;
margin:10px 10px 0px 20px;
background:greenyellow;
text-align:center;
}
#lineT{
width: 150px;
height: 30px;
background:bisque;
}
#canvas_control{
margin:10px 10px 20px 30px;
text-align:center;
}
#canvasImage{
text-align: center;
}
#imgDiv{
margin: 0 auto;
}
#line{
width: 40px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content">
<canvas id="mycanvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<div id="canvas_selector">
<div id="canvas_color">
<h5 class="title">颜色<input type="color" name="color" id="changeColor" /></h5>
</div>
<div id = "canvas_brush">
<h5 class = "title"> Brush size </ h5>
<input type="range" id="lineT" min="1" max="100" value="2">
</div>
<div id="canvas_control">
<h5 class="title">操作</h5>
<span><button style="background:greenyellow" id="prev">上一步</button></span>
<span><button style="background:greenyellow" id="cloth">橡皮擦</button></span>
<span><button style="background:#ffc200" id="clear">清除</button></span>
</div>
<div id="canvasImage">
<button id="createImg">生成图像</button>
</div>
</div>
</div>
<div id="imgDiv"></div>
</ body>
</html>
<script>
var canvas = document.getElementById ("mycanvas");
var ctx = canvas.getContext ("2d"); // Create canvas object
var bool = false;
var left = $ ("# mycanvas"). offset ( ) .left; // Get the left value of the canvas
console.log ("left", left);
var top = $ ("# mycanvas"). offset (). top; // Get the top value of the canvas
console.log ( "top", top);
var canvasW = $ ("# mycanvas"). width (); // Get the width of the canvas
console.log ("canvasW", canvasW);
var canvasH = $ ("# mycanvas"). height (); // Get the height of the canvas
console.log ("canvasH", canvasH);
var img = []; // The array used to store the screenshot of the canvas picture
var imgDiv = document.getElementById ("imgDiv");
var content = document.getElementById("content")
var color="#000";
ctx.lineCap = "round"; // set the line end cap style
ctx.lineJion = "round"; // Set the type of corner two lines intersect, created
// mouse click to set the starting point of the canvas
$ ( "# mycanvas ") .mousedown (function (e) {
bool = true;
console.log (" mousedown ", bool);
ctx.beginPath (); // start / reset a path
ctx.moveTo (e.clientX-left, e.clientY-top); // Move the path to the specified point in the canvas without creating a line
var pic = ctx.getImageData (0,0, canvasW, canvasH); // Get the image of the current canvas
img.push (pic ); //
Save the current image in an array
});
// Move the mouse to draw a line when bool = ture $ ("# mycanvas"). Mousemove (function (e) {
console.log ("mousemove", bool);
if (bool) {// Control the continuity of line drawing by bool value, if bool = true, draw line
console.log ("if(bool)",bool);
ctx.lineTo (e.clientX-left, e.clientY-10); // Add a new point, create a line from this point to the last specified point in the canvas
ctx.stroke (); // Draw line
}
}) ;
// When the mouse moves out of the canvas or lifts up, exit the current drawing line, and create a new drawing line to achieve intermittent drawing
$ ("# mycanvas"). Mouseout (function (e) {
ctx.closePath (); // When the mouse moves out of the canvas area, create a path from the current point to the starting point
bool = false;
console.log ("mouseout", bool);
});
$ ("# mycanvas"). Mouseup (function (e) {
ctx .closePath (); // When the mouse is raised, create a path from the current point to the starting point
bool = false;
console.log ("mouseup", bool);
});
// Clear the canvas
$ ("# clear ") .click (function () {
// alert (" Are you sure clear the canvas? ");
ctx.clearRect (0,0, canvasW, canvasH); // Create a rectangle to clear
});
// Erase the canvas
$ ("# cloth"). click (function () {
ctx.strokeStyle = "# fff"; / / Use line drawing to realize the eraser function in white
});
// Previous step
$ ("# prev"). Click (function () {
if (img.length> = 0) {
console.log ("img.length" , img.length);
var newImgLength = img.length;
console.log ("newImgLength", newImgLength);
ctx.putImageData (img.pop (), 0,0);
}
});
// Change the color
$ (" #changeColor "). change (function () {
ctx.strokeStyle = this.value; // Change color
});
// Change brush size
$ (" # lineT ").change(function(){
ctx.lineWidth = this.value;
});
// Generate an image
$ ("# createImg"). click (function () {
var url = canvas.toDataURL ('image / png');
var newImg = new Image () ; // Create an Image object
newImg.src = url;
imgDiv.appendChild (newImg);
imgDiv.style.width = "500px";
imgDiv.style.height = "500px";
imgDiv.style.background = "# ccc" ;
});
// Function realization on mobile phone
// Mouse click to set canvas start point
canvas.ontouchstart = function (a) {
bool = true;
ctx.moveTo (x , y);
var pic = ctx.getImageData (0,0, canvasW, canvasH); // Get the current canvas image
var x = a.touches [0] .clientX;
var y = a.touches [0] .clientY;
console.log(x,y);
ctx.beginPath (); // Start / Reset a path
img.push (pic); // Save the current image into an array
};
canvas.ontouchmove = function (a) {
console.log ("move", bool );
var x = a.touches [0] .clientX;
var y = a.touches [0] .clientY;
if (bool) {// Control the continuity of line drawing by bool value, if bool = true, draw line
console.log ("if (bool2)", bool);
ctx.lineTo (x-left, y); // Add a new point, create a line
ctx.stroke () from this point to the last specified point in the canvas ; // Line drawing
}
};
</ script>