Uso lienzo para dibujar gráficos en HTML

* La siguiente es la nota

En primer lugar, ¿cuál es el lienzo

HTML5 <canvas> se utiliza para dibujar gráficos, realizado por un guión (por lo general JavaScript).
<Canvas> es sólo un contenedor gráfica, debe utilizar una secuencia de comandos para dibujar gráficos.

Puede utilizar el lienzo por una variedad de métodos para dibujar trazados, cajas, círculos, los personajes y la adición de imágenes.

En segundo lugar, cómo utilizar el lienzo

1, el establecimiento de un ejemplo de lona

    <canvas id="myCanvas" width="200" height="100"
        style="border:1px solid #000000;">
    </canvas>

efecto:

2, dibujar la imagen usando JavaScript

El elemento canvas en sí no es un suministro eléctrico. Todo el trabajo de dibujo debe ser completado dentro de JavaScript:

//通过getElementById找到<canvas>元素
var can = document.getElementById("myCanvas");
// 创建context对象
var ctx = can.getContext("2d");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
// 接下来就可以使用context对象来进行画图了

// 例1
context.beginPath();

En tercer lugar, varios parámetros del lienzo

1, las coordenadas de lona

lienzo es una rejilla de dos dimensiones
dejó esquina de la lona por (0,0)

2, camino de lienzo

En lona pintura línea, vamos a utilizar los dos métodos siguientes:

moveTo(x,y)Define una línea de coordenadas iniciales
lineTo(x,y)definen una línea que termina coordenadas
para dibujar líneas que tenemos que utilizar los métodos de "tinta", comostroke()

context.moveTo(0,120);
context.lineTo(0,180);
context.lineTo(110,150);
context.fill();//闭合形状而且以填充方式绘制出来

Dibuje un círculo en el lienzo, vamos a utilizar los métodos siguientes:
arc(x,y,r,start,stop,counterclockwise)
X: X-coordenada
y: coordenada
r: radio de
inicio: iniciar ángulo en radianes
parada: Ángulo final, en radianes
en sentido antihorario: Alternativamente, en sentido horario o en sentido antihorario False = agujas del reloj, true = antihorario

// 在300，400处，逆时针画一个半径为30，角度为0到270度的弧

context.arc(300, 400, 30, 0*Math.PI, 3/2*Math.PI,false);
context.stroke();

3, el texto de la lona

Uso lienzo para dibujar texto, propiedades y métodos importantes son las siguientes:
font- fuente personalizado
fillText(text,x,y)- el texto para rendir sólida sobre lienzo
strokeText(text,x,y)- texto renderizado hueco en la lona

context.font="30px Arial";
context.fillText("Hello Edison", 30, 50);

4, imagen

Una imagen se coloca en el lienzo, utilizando el método siguiente:

drawImage(image,x,y)
Empecé está escrito

var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
var context = can.getContext("2d");
context.drawImage(this, 0, 0);

Luego descubrí, escritura y no muestran la imagen
después de acceder a la información en línea aprendió

Insertar imágenes en el lienzo, se debe esperar antes de que puedan ser el funcionamiento a plena carga después de la imagen, mientras que el navegador asíncrono realizaría normalmente en la página de guión de imagen de carga.
Si intenta imagen no está totalmente cargado antes de que se presentará a la lona, no mostrará ninguna imagen.

Así que el código después de las modificaciones son las siguientes:

var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
//待图片加载完后，将其显示在canvas上
imgObj.onload = function(){ //onload必须使用
    var context = can.getContext("2d");
    context.drawImage(this, 0, 0);
}

Efecto:

referencia * al novato tutorial
https://www.runoob.com/html/html5-canvas.html
https://www.runoob.com/tags/ref-canvas.html

En tercer lugar, he pintado, patrón de lujo

 var can = document.getElementById("myCanvas");
var context = can.getContext("2d");

// 熊的大脸
context.beginPath();
context.arc(300, 200, 90, 0*Math.PI, 2*Math.PI,false);
context.stroke();

// 左眼
context.beginPath();
context.arc(270, 180, 7, 0*Math.PI, 2*Math.PI,false);
context.fill();
// 右眼
context.beginPath();
context.arc(330, 180, 7, 0*Math.PI, 2*Math.PI,false);
context.fill();

// 嘴巴边缘
context.beginPath();
context.arc(300, 240, 35, 0, 2*Math.PI,true);
context.stroke();
// 鼻子
context.beginPath();
context.arc(300, 220, 8, 0, 2*Math.PI,true);
context.fill();
// 嘴巴
context.beginPath();
context.arc(300, 250, 10, Math.PI, 2*Math.PI,true);
context.fill();

// 右耳
context.beginPath();
context.arc(380, 135, 30, 1/2*Math.PI, 10/9*Math.PI,true);
context.stroke();

//左耳
context.beginPath();
context.arc(220, 135, 30, 1/2*Math.PI, 19/10*Math.PI,false);
context.stroke();

context.beginPath();

//右手
context.beginPath();
context.moveTo(460,260);//从点(160,160)開始
context.lineTo(470,320);
context.lineTo(540,310);
context.lineTo(560,270);
context.lineTo(490,240);
context.closePath();
context.stroke();

// 左手
context.beginPath();
context.moveTo(140,260);
context.lineTo(130,320);
context.lineTo(60,310);
context.lineTo(40,270);
context.lineTo(110,240);
context.closePath();
context.stroke();

// 身体
context.beginPath();
context.rect(200,330,200,300);
context.stroke();

// 左脚
context.beginPath();
context.arc(130, 700, 30, 0, 2*Math.PI,true);
context.stroke();
// 左脚内圆
context.beginPath();
context.arc(130, 700, 5, 0, 2*Math.PI,true);
context.stroke();

// 右脚
context.beginPath();
context.arc(470, 700, 30, 0, 2*Math.PI,true);
context.stroke();
// 右脚内圆
context.beginPath();
context.arc(470, 700, 5, 0, 2*Math.PI,true);
context.stroke();


// 图片摆放
var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
imgObj.onload = function(){ //onload必须使用
    var context = can.getContext("2d");
    context.drawImage(this, 600, 400);
}
// 写上署名
context.font="20px Arial";
context.fillText("文字：hjh留下了名字", 600, 740);

efecto: