Recientemente, estudié algunos atributos de elementos nuevos de HTML5 y descubrí que son realmente fáciles de usar, especialmente el nuevo elemento de etiqueta Canvas. Introducción oficial: Canvas API (canvas) es una nueva etiqueta en HTML5 que se utiliza para generar imágenes en tiempo real en páginas web y puede manipular el contenido de la imagen. Básicamente, es un mapa de bits que se puede manipular con JavaScript. Lo siguiente utiliza JavaScript combinado con Canvas para implementar una función de tablero de dibujo
Imagen de demostración del efecto:
Parte del código (cópialo directamente y úsalo)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas implementa un tablero de dibujo personalizado</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var lienzo = document.getElementById(lienzo var ctx = lienzo.getContext(2d); //Dibuja un rectángulo negro ctx.fillStyle=black; ctx.fillRect(0,0,600,300); //Presiona la marca var onoff = false //Las variables oldx y oldy representan las coordenadas antes de que se mueva el mouse var oldx = -10 ; var oldy = -10; //Establece el color var linecolor = white //Establece el ancho de línea var linw = 4; // Agregar evento de movimiento del mouse canvas.addEventListener(mousemove,draw,true); // El tercer parámetro está relacionado principalmente con la captura o burbujeo // Agregar evento de pulsación del mouse canvas.addEventListener(mousedown,down,false); arriba evento canvas.addEventListener(mouseup,up,false); función abajo(evento){ onoff = oldx = event.pageX-10; evento.páginaY-10; //console.log(event.pageX+'............000.............'+event.pageY) / /event.pageX y event.pageY son relativos a la posición del mouse de toda la página, incluida la parte de desbordamiento (es decir, la barra de desplazamiento) } function up(){ onoff = false } function draw(event){ if(onoff; == verdadero) { var newx = event.pageX-10; event.pageY-10; ctx.beginPath();//beginPath() Descarta cualquier ruta definida actualmente y comienza una nueva. Establece el punto actual en (0,0). ctx.moveTo(oldx,oldy); //Mover a la coordenada cuando se hace clic, con esa coordenada como origen ctx.lineTo(newx,newy); //Dibujar una nueva ruta ctx.strokeStyle=linecolor; ; ctx.lineCap=round; ctx.stroke();// El método Stroke() en realidad dibujará la ruta definida por los métodos moveTo() y lineTo(). El color predeterminado es el negro. //Asigna la nueva posición del mouse a la coordenada inicial del siguiente dibujo start oldx = newx; oldy = newy };</script></body></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.