Recentemente, estudei alguns novos atributos de elementos do HTML5 e descobri que eles são realmente fáceis de usar, especialmente o novo elemento de tag Canvas. Introdução oficial: Canvas API (canvas) é uma nova tag em HTML5 que é usada para gerar imagens em tempo real em páginas da web e pode manipular o conteúdo da imagem. Basicamente, é um bitmap que pode ser manipulado com JavaScript. O seguinte usa JavaScript combinado com Canvas para implementar uma função de prancheta
Imagem de demonstração de efeito:
Parte do código (copie-o diretamente e use-o)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas implementa prancheta de desenho personalizada</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var canvas = document.getElementById(canvas); //Desenhe um retângulo preto ctx.fillStyle=black; //Pressione a marca var onoff = false //As variáveis oldx e oldy representam as coordenadas antes do movimento do mouse var oldx = -10; ; var oldy = -10; //Definir a cor var linecolor = branco; //Definir a largura da linha var linw = 4; //Adicionar evento de movimento do mouse canvas.addEventListener(mousemove,draw,true); //O terceiro parâmetro está relacionado principalmente à captura ou borbulhamento //Adicionar evento de pressionamento do mouse canvas.addEventListener(mousedown,down,false); evento up canvas.addEventListener(mouseup,up,false); função down(evento){ onoff = true; event.pageY-10; //console.log(event.pageX+'..........000.............'+event.pageY) ; /event.pageX e event.pageY são relativos à posição do mouse de toda a página, incluindo a parte de estouro (ou seja, a barra de rolagem) } function up(){ onoff = false } function draw(event){ if(onoff; == verdadeiro) { var newx = event.pageX-10; event.pageY-10; ctx.beginPath();//beginPath() Descarta qualquer caminho atualmente definido e inicia um novo. Ele define o ponto atual para (0,0). ctx.moveTo(oldx,oldy); //Mover para a coordenada quando clicado, com essa coordenada como origem ctx.lineTo(newx,newy); //Desenhar um novo caminho ctx.strokeStyle=linecolor; ; ctx.lineCap=round; ctx.stroke();//O método stroke() irá realmente desenhar o caminho definido pelos métodos moveTo() e lineTo(). A cor padrão é preta. //Atribuir a nova posição do mouse à coordenada inicial do próximo início do desenho oldx = newx; oldy = newy };</script></body></html>;O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.