Este artigo compartilha um código do quadro de fotos implementado pela HTML5 Canvas para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Demo6: quadro de arte personalizado </ititle> </ad Head> <body> <canvas id = "Canvas"> o navegador não suporta tela <!-se este texto não for suportado, ele será exibido-> OnClick = 'lineColor = "Yellow";'> Amarelo </botão> <botão onclick = 'lineColor = "Red";'> Red </Button> <botão onclick = 'lineColor = "azul";'> Blue </Button> Button OnClick = 'lineColor = "Green;'> verde </Blowt> <butt> onClick = 'Linecolor =" ";'> verde ONCLICK = 'lineColor = "Black";'> Black </botão> <br/> <button onclick = "linw = 4;"> 4px </button> <botão onclick = "linw = 8;"> 8px </Button <Button OnClick = "Linw = 16;"> 16px </"; <br/> <img src = "" id = "image_png"> <br/> <script type = "text/javascript"> var canvas = document.getElementById ('canvas'); // obtenha a tag var ctx = canvas.getContext ("2D"); Var FillStyle = "Black"; ctx.FillRect (0,0,600.300); var onoff = false; // Pressione a tag var Oldx = -10; var Oldy = -10; // defina a cor var lineColor = "branca"; var linw = 4; canvas.addeventListener ("mousemove", desenho, verdadeiro); // Evento de movimento do mouse Canvas.addeventListener ("Mousedown", Down, False); // mouse Press Event Canvas.addeventListener ("MouseUp", Up, False); // Função de eventos pop-up do mouse para baixo (evento) {ONOFF = true; oldx = event.pagex - 10; Oldy = Event.Pagey - 10; } function up () {onoff = false; } função 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 = "redonda"; ctx.stroke (); Oldx = newx; Oldy = Newy; }} função copyImage (event) {var iMg_png_src = canvas.todataurl ("image/png"); // funciona que salva a prancha de arte como documento de formato de imagem.getElementById ("image_png"). Src = img_png_src; } </script> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.