Este artículo comparte un código de tablero de imágenes implementado por HTML5 Canvas para su referencia. El contenido específico es el siguiente
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Demo6: personalizado de Artboard </title> </head> <body> <Canvas id = "Canvas"> El navegador no admite Canvas <! Si este texto no se admite, se mostrará-> </Canvas> <BR/> <Botón <Botón <Botón onClick = 'lineColor = "Yellow";'> Yellow </Button> <Button OnClick = 'linecolor = "rojo";'> rojo </botón> <botón onclick = 'linecolor = "blue";'> blue </boton> <button onClick = 'linecolor = "verde";'> verde </botón <button <botut onClick = 'lineColor = "Black";'> negro </boton> <br/> <button onClick = "linw = 4;"> 4px </boton> <button onClick = "linw = 8;"> 8px </button> <button onClick = "linw = 16;"> 16px </button <br/> <button onClick = "Copyimage ();") <br/> <img src = "" id = "image_png"> <br/> <script type = "text/javascript"> var canvas = document.getElementById ('Canvas'); // Obtener la etiqueta var ctx = canvas.getContext ("2d"); var fillstyle = "negro"; ctx.fillrect (0,0,600,300); var OnOff = false; // Presione la etiqueta var Oldx = -10; var Oldy = -10; // Establecer el color var linecolor = "white"; var linw = 4; Canvas.addeventListener ("mouseMove", dibujar, verdadero); // Evento de movimiento del mouse Canvas.AddeventListener ("MouseDown", Down, False); // Mouse Press Event Canvas.AdDeventListener ("MouseUp", Up, False); // Función de evento emergente del mouse Down (Event) {OnOff = True; Oldx = Event.Pagex - 10; Oldy = Event.Pagey - 10; } function up () {onoff = false; } function Draw (Event) {if (Onoff == True) {var newx = Event.Pagex - 10; var newy = event.pagey - 10 ctx.beginpath (); ctx.moveto (Oldx, Oldy); CTX.Lineto (Newx, Newy); ctx.Strokestyle = Linecolor; ctx.linewidth = linw; ctx.linecap = "redondeo"; ctx.stroke (); Oldx = newx; Oldy = Newy; }} función copyImage (evento) {var img_png_src = canvas.todataurl ("imagen/png"); // Funciones que guardan el tablero de Art como formato de imagen Document.getElementById ("image_png"). Src = img_png_src; } </script> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.