Com base na última vez, adicionados alguns códigos, o terminal móvel pode ser operado
URL da visita: https://chandler712.github.io/Item/
<! - 简单 版 画板 ->
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device- largura, escala inicial = 1.0 ">
<title> 简单 版 画板 </title>
<script src =" https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "> < / script>
<style>
body, div, canvas, h5, entrada, ul, li, p, botão {
margin: 0px;
preenchimento: 0px;
posição: relativa;
}
#mycanvas {
margin: 5px;
}
#content {
margin: 5px auto;
largura: 700px;
altura: 510px;
borda: 1px cinza sólido;
altura: 20 px;
}
#canvas_selector {
position: absolute;
margem esquerda: 505px;
margem superior: -512 px;
altura: 500 px;
largura: 190px;
borda: 1px preto sólido;
}
.título {
alinhamento de texto: centro;
margem inferior: 10 px;
}
ul li {
tipo de estilo de lista: nenhum;
margem: 10 px 30 px 10 px 20 px;
display: bloco;
flutuar: esquerda;
largura: 40 px;
fundo: verde-amarelo;
cursor: ponteiro;
borda: 1px cinza sólido;
}
# canvas_color, # canvas_brush, # canvas_control, # canvasImage {
margin: 50px 0 50px 0;
}
#canvas_brush {
height: 80px;
margem: 10 px 10 px 0 px 20 px;
fundo: verde-amarelo;
alinhamento de texto: centro;
}
#lineT {
width: 150px;
altura: 30px;
fundo: bisque;
}
#canvas_control {
margin: 10px 10px 20px 30px;
alinhamento de texto: centro;
}
#canvasImage {
alinhamento de texto: centro;
}
#imgDiv {
margin: 0 auto;
}
#line {
width: 40px;
altura: 20 px;
cursor: ponteiro;
}
</style>
</head>
<body>
<div id = "content">
<canvas id = "mycanvas" width = "500" height = "500" style = "borda: 1px vermelho sólido;"> </ tela>
<div id = "canvas_selector">
<div id = "canvas_color">
<h5 class = "
<div id = "canvas_brush">
<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"> 橡皮B </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"); // Criar objeto de tela
var bool = false;
var left = $ ("# mycanvas"). offset ( ) .left; // Obtém o valor esquerdo do canvas
console.log ("left", left);
var top = $ ("# mycanvas"). offset (). top; // Obtém o valor superior do canvas
console.log ( "top", top);
var canvasW = $ ("# mycanvas"). width (); // Obtém a largura da tela
console.log ("canvasW", canvasW);
var canvasH = $ ("# mycanvas"). height (); // Obtém a altura da tela
console.log ("canvasH", canvasH);
var img = []; // A matriz usada para armazenar a captura de tela da imagem da tela
var imgDiv = document.getElementById ("imgDiv");
var content = document.getElementById ("content")
var color = "# 000";
ctx.lineCap = "round"; // Defina o estilo do ponto final da linha
ctx.lineJion = "round"; // Defina o tipo de canto criado quando duas linhas se cruzam.//Clique o
mouse para definir o ponto inicial da tela
$ ("# mycanvas ") .mousedown (função (e) {
bool = true;
console.log (" mousedown ", bool);
ctx.beginPath (); // inicia / redefine um caminho
ctx.moveTo (e.clientX-left, e.clientY-top); // Mova o caminho para o ponto especificado na tela sem criar uma linha
var pic = ctx.getImageData (0,0, canvasW, canvasH); // Obtenha a imagem da tela atual
img.push (pic ); //
Salve a imagem atual em uma matriz
});
// Mova o mouse para desenhar uma linha quando bool = ture $ ("# mycanvas"). Mousemove (function (e) {
console.log ("mousemove", bool);
if (bool) {// Controla a continuidade do desenho da linha pelo valor bool, se bool = true, desenha a linha
console.log ("if (bool) ", bool);
ctx.lineTo (e.clientX-left, e.clientY-10); // Adicione um novo ponto, crie uma linha a partir deste ponto até o último ponto especificado na tela
ctx.stroke (); // Draw line
}
}) ;
// Quando o mouse sair da tela ou levantar, saia da linha de desenho atual e crie uma nova linha de desenho para obter um desenho intermitente
$ ("# mycanvas"). Mouseout (function (e) {
ctx.closePath (); // Quando o mouse sair da área da tela, crie um caminho do ponto atual para o ponto inicial
bool = false;
console.log ("mouseout", bool);
});
$ ("# mycanvas"). Mouseup (function (e) {
ctx .closePath (); // Quando o mouse é levantado, crie um caminho do ponto atual para o ponto inicial
bool = false;
console.log ("mouseup", bool);
});
// Limpe a tela
$ ("# clear ") .click (function () {
// alert (" Você tem certeza de que limpa a tela? ");
ctx.clearRect (0,0, canvasW, canvasH); // cria um retângulo para limpar
});
// apaga a tela
$ ("# cloth"). click (function () {
ctx.strokeStyle = "# fff"; / / Use o desenho de linha para realizar a função borracha em branco
});
// Etapa anterior
$ ("# prev"). Clique em (função () {
if (img.length> = 0) {
console.log ("img.length" , img.length);
var newImgLength = img.length;
console.log ("newImgLength", newImgLength);
ctx.putImageData (img.pop (), 0,0);
}
});
// Altere a cor
$ (" #changeColor "). change (function () {
ctx.strokeStyle = this.value; // Alterar cor
});
// Alterar tamanho do pincel
$ ("# lineT"). change (function () {
ctx.lineWidth = this.value;
});
// Gere uma imagem
$ ("# createImg"). click (function () {
var url = canvas.toDataURL ( 'image / png');
var newImg = new Image (); // Criar um objeto de imagem
newImg.src = url;
imgDiv.appendChild (newImg);
imgDiv.style.width = "500px";
imgDiv.style.height = "500px";
imgDiv.style.background = "# ccc";
});
// Função no terminal móvel
// Clique no mouse para definir o ponto inicial da tela
canvas.ontouchstart = function (a) {
bool = true;
var x = a.touches [0] .clienteX;
var y = a. Toca em [0] .clienteY;
console.log (x, y);
ctx.beginPath (); // Iniciar / redefinir um caminho
ctx.moveTo (x , y);
var pic = ctx.getImageData (0,0, canvasW, canvasH); // Obtém a imagem da tela atual
img.push (pic); // Salve a imagem atual em uma matriz
};
canvas.ontouchmove = function (a) {
console.log ("move", bool );
var x = a.touches [0] .clientX;
var y = a.touches [0] .clientY;
if (bool) {// Controla a continuidade do desenho de linha pelo valor bool, se bool = true, desenha a linha
console.log ("if (bool2)", bool);
ctx.lineTo (x-left, y); // Adicione um novo ponto, crie uma linha
ctx.stroke () desse ponto até o último ponto especificado na tela ; // Desenho da linha
}
};
</ script>