Cet article partage un code de carte d'image implémenté par HTML5 Canvas pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Demo6: personnalisé artboard </ title> </ head> </ body> <canvas id = "canvas"> le navigateur ne prend pas en charge les canevas <! - Si ce texte n'est pas pris en charge, il sera affiché -> </ canevas> onClick = 'lineColor = "Yellow";'> Yellow </ Button> <Button OnClick = 'lineColor = "Red";'> Red </futton> <Button OnClick = 'lineColor = "Blue";'> Blue </ Button> <bouton OnClick = 'LineColor = "Green"; onclick = 'lineColor = "noir";'> noir </ftont> <br/> <bouton onclick = "linw = 4;"> 4px </futton> <bouton onClick = "linw = 8;"> 8px </button> <bouton onclick = "linw = 16;"> 16px </sport> <brut> <bouton OnClick = "CopyImage ();"> export </bout <br/> <img src = "" id = "image_png"> <br/> <script type = "text / javascript"> var canvas = document.getElementByid ('canvas'); // Obtenez le balise var ctx = canvas.getContext ("2d"); var fillstyle = "noir"; ctx.fillrect (0,0,600,300); var onoff = false; // appuyez sur le balise var oldx = -10; var oldy = -10; // Définit la couleur var lineColor = "White"; var linw = 4; canvas.addeventListener ("MouseMove", Draw, True); // Événement de mouvement de souris Canvas.AddeventListener ("Mousedown", Down, False); // Mouse Press Event Canvas.AddeventListener ("MouseUp", UP, FALSE); // Fonction de l'événement pop-up de souris en bas (événement) {onoff = true; OldX = Event.Pagex - 10; oldy = event.pagey - 10; } function up () {onoff = false; } fonction 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 = "rond"; ctx.stroke (); oldx = newx; oldy = newy; }} fonction copyimage (event) {var img_png_src = canvas.todataurl ("image / png"); // Fonctions qui enregistrent le tableau artistique en tant que document de format d'image.getElementById ("image_png"). Src = img_png_src; } </ script> </ body> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.