Durante meu estágio, me pediram para usar o canvas para desenhar uma expressão. Foi relativamente simples, não falei muito e fui direto ao código:
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> Seu navegador não suporta Canvas </canvas></div><script> janela. function () { var canvas = document.getElementById(canvas); canvas.getContext(2d); //Os parâmetros da função usados para desenhar um círculo preenchido são coordenadas centrais, raio, posições inicial e final, cor da linha e cor de preenchimento function drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { context.beginPath(); context.arc(x2, y2, r2, a2, b2 * context.strokeStyle = lineColor; context.fillStyle = FillColor; context.fill(); //Confirma o preenchimento context.stroke() }; //A linha padrão usada para desenhar uma função de arco é preta sem preenchimento. coordenada, raio, posição inicial, posição final função drawsArc(x, y, r, l1, l2) { context.beginPath(); ); context.strokeStyle = black; context.stroke() }; //Função usada para desenhar olhos function darwEyes(x1, y1, a1, b1) { //Os parâmetros são o eixo longo e o eixo curto do contexto da posição central da elipse. .strokeStyle = #754924 ParamEllipse(context, x1, y1, a1, b1); //Função elipse ParamEllipse(context, x, y, a, b) { //Faça o caminho (arco) desenhado em cada ciclo próximo de 1 pixel var step = (a > b) 1 / a : 1 / b; context.moveTo(x + a, y) ; //Começa a desenhar a partir do extremo esquerdo da elipse for (var i = 0; i < 2 * Math.PI; i += step) { //O parâmetro é i, indicando o grau (radianos) context.lineTo(x + um * Math.cos(i), y + b * Math.sin(i)); context.closePath(); /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //Olho esquerdo context.strokeStyle = #754924 darwEyes(116, 130, 18, 25); drawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); , 127, 12, 0, 2, #754924, #F5F5F5); //Sobrancelha esquerda desenhaArc(100, 100, 50, 1.3, 1.7); //Sobrancelha direita desenhaArc(300, 100, 50, 1.3, 1.7); 200, 120, 180, 0,3, 0.7); }</script></body>renderizações
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.