Html usa Canvas para dibujar gráficos

Internet 2023-07-25 19:41:30 views: null

Hoy recibí un mensaje privado de un fan, preguntando si es posible dibujar algunos gráficos a través de Canvas, y luego simular el dibujo a través de Canvas de acuerdo con la plantilla proporcionada por el fan.A través del análisis, descubrí que, aunque los gráficos son relativamente simples, si no usa el software correspondiente, el dibujo de código puro todavía lleva un poco de tiempo. Hoy, compartiré el código fuente de los gráficos de dibujo solo para aprender y compartir. Si hay alguna deficiencia, corríjame.

imagen

¿Qué es el lienzo?

Canvas representa un contenedor de gráficos (llamado lienzo) que se puede dibujar usando scripts.

Coordenadas del lienzo

canvas es una cuadrícula bidimensional. Las coordenadas de la esquina superior izquierda del lienzo son (0,0). Como se muestra en la imagen a continuación, las coordenadas X e Y del lienzo se utilizan para colocar la pintura en el lienzo. Las coordenadas de posicionamiento se muestran en el marco rectangular donde se mueve el mouse.

Interfaz de lienzo

Canvas proporciona funciones de dibujo de gráficos simples de forma predeterminada, como líneas rectas, rectángulos, arcos, curvas Bezier, etc. Los gráficos simples se pueden dibujar a través de la interfaz y los gráficos complejos deben realizarse a través de diferentes combinaciones de gráficos simples.

Para obtener más información, consulte: https://www.w3school.com.cn/jsref/dom_obj_canvas.asp

Exigir foto original

En primer lugar, mire la imagen original enviada por los fanáticos. Los gráficos en el cuadro rojo son relativamente complicados, como se muestra a continuación:

Dibujo de lienzo

Dibuja los gráficos correspondientes a través de Canvas, el efecto es el siguiente:

Código fuente de dibujo de lienzo

Primero cree un contenedor de dibujo de Canvas y créelo a través de la etiqueta de canvas. Cada gráfico se crea con un contenedor, independientes entre sí, de la siguiente manera:

<canvas id="bigHeadCanvas" width="150" height="150"></canvas>
<canvas id="circleCanvas" width="150" height="150"></canvas>
<canvas id="fishCanvas" width="150" height="150"></canvas>
<canvas id="heartCanvas" width="150" height="150"></canvas>
<canvas id="pandaCanvas" width="150" height="150"></canvas>
<canvas id="sunFlowerCanvas" width="150" height="150"></canvas>
<canvas id="fiveStarCanvas" width="150" height="150"></canvas>
<canvas id="catCanvas" width="150" height="150"></canvas>
<canvas id="foxCanvas" width="150" height="150"></canvas>
<canvas id="appleCanvas" width="150" height="150"></canvas>
<canvas id="rectCanvas" width="150" height="150"></canvas>
<canvas id="sixCanvas" width="150" height="150"></canvas>
<canvas id="diamondCanvas" width="150" height="150"></canvas>
<canvas id="circleRectCanvas" width="150" height="150"></canvas>
<canvas id="eggCanvas" width="150" height="150"></canvas>

1. Dibujar Oso Grande

Para dibujar un oso grande, el código es el siguiente:

function drawBigHead(){
	var c = document.getElementById("bigHeadCanvas");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(50,50,50,Math.PI*1.85,Math.PI*1.15);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(50,50,45,Math.PI*1.35,Math.PI*1.68);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(17,17,15,Math.PI*0.7,Math.PI*1.8);//左耳
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(87,17,15,Math.PI*1.15,Math.PI*0.3);//右耳
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('大头熊形',30,130);
}
Nota: Las dos primeras oraciones son para crear el objeto de contexto Canvas, primero obtenga el control canvas, luego cree el objeto y luego use el objeto para crear gráficos.

2. Dibuja el círculo

Dibuja un patrón circular de la siguiente manera:

function drawCircle(){
	var c = document.getElementById("circleCanvas");
	var ctx = c.getContext("2d");
 
	ctx.arc(55,55,50,Math.PI*0,Math.PI*2);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('圆形',35,130);
}

3. Dibuja la forma del pez.

Dibuja la forma del pez de la siguiente manera:

function drawFish(){
	var c = document.getElementById("fishCanvas");
	var ctx = c.getContext("2d");
	
	ctx.beginPath();
	ctx.arc(56,52,52,Math.PI*0.75,Math.PI*1.44);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(32,52,52,Math.PI*1.57,Math.PI*0.25);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(42,135,32,Math.PI*1.30,Math.PI*1.70);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(17,105,8,Math.PI*0.15,Math.PI*1.3);
	ctx.lineTo(20,88);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(67,105,8,Math.PI*0.88,Math.PI*1.75,true);
	ctx.lineTo(70,88);
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('鱼形',28,130);
}

4. Dibuja la forma del corazón.

Dibuja el patrón del corazón de la siguiente manera:

function drawHeart(){
	var c = document.getElementById("heartCanvas");
	var ctx = c.getContext("2d");
	ctx.arc(36,26,20,Math.PI*0.75,Math.PI*1.75);
	ctx.lineTo(60,25);
	ctx.lineTo(70,10);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(83,26,20,Math.PI*1.25,Math.PI*0.25);
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(21,40);
	ctx.lineTo(60,90);
	ctx.lineTo(98,40);
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('心形',45,130);
}

5. Dibuja la forma del gran oso.

Para dibujar una forma de oso grande, el código es el siguiente:

function drawPanda(){
	var c = document.getElementById("pandaCanvas");
	var ctx = c.getContext("2d");
	//上
	ctx.arc(18,15,15,Math.PI*0.75,Math.PI*1.85);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(80,15,15,Math.PI*1.13,Math.PI*0.20);
	ctx.lineTo(88,39);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(48,75,70,Math.PI*1.42,Math.PI*1.59);
	ctx.stroke();
	
	//中
	ctx.beginPath();
	ctx.arc(30,55,28,Math.PI*0.75,Math.PI*1.25);
	ctx.lineTo(6,23);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(66,55,28,Math.PI*1.78,Math.PI*0.25);
	ctx.lineTo(80,88);
	ctx.stroke();
 
	//下
	ctx.beginPath();
	ctx.arc(25,93,12,Math.PI*0.27,Math.PI*1.20);
	ctx.lineTo(10,74);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(70,93,12,Math.PI*1.83,Math.PI*0.73);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(47,135,35,Math.PI*1.35,Math.PI*1.65);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('大熊形',33,130);
}

6. Dibujar el girasol

Para dibujar girasoles, el código es el siguiente:

function drawSunFlower(){
	var c = document.getElementById("sunFlowerCanvas");
	var ctx = c.getContext("2d");
	var startX=2;
	var startY=2;
	var radius=15;
	
	//上
	ctx.beginPath();
	ctx.arc(startX+4*radius,startY+1.5*radius,radius,Math.PI*1,Math.PI*0);
	ctx.stroke();
	//下
	ctx.beginPath();
	ctx.arc(startX+4*radius,startY+6.3*radius,radius,Math.PI*0,Math.PI*1);
	ctx.stroke();
	//左
	ctx.beginPath();
	ctx.arc(startX+1.5*radius,startY+4.0*radius,radius,Math.PI*0.4,Math.PI*1.6);
	ctx.stroke();
	//右
	ctx.beginPath();
	ctx.arc(startX+6.2*radius,startY+4*radius,radius,Math.PI*0.5,Math.PI*1.5,true);
	ctx.stroke();
	//上右
	ctx.beginPath();
	ctx.arc(startX+5.7*radius,startY+2.1*radius,radius,Math.PI*1.20,Math.PI*0.40);
	ctx.stroke();
 
	//上左
	ctx.beginPath();
	ctx.arc(startX+2.0*radius,startY+2.0*radius,radius,Math.PI*1.9,Math.PI*0.60,true);
	ctx.stroke();
 
	//下左
	ctx.beginPath();
	ctx.arc(startX+2.0*radius,startY+6.0*radius,radius,Math.PI*0,Math.PI*1.38);
	ctx.stroke();
 
	//下右
	ctx.beginPath();
	ctx.arc(startX+5.8*radius,startY+5.8*radius,radius,Math.PI*0.78,Math.PI*1.58,true);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('太阳花形',35,130);
}

7. Dibuja una estrella de cinco puntas

Dibuja un pentagrama de la siguiente manera:

function drawFiveStar(){
	var c = document.getElementById("fiveStarCanvas");
	var ctx = c.getContext("2d");
	ctx.moveTo(30,20);
	ctx.beginPath();
	ctx.lineTo(50,0);//顶
	ctx.lineTo(70,20);
	ctx.lineTo(100,30);
	ctx.lineTo(85,60);
	ctx.lineTo(80,90);
	ctx.lineTo(50,80);//底
	ctx.lineTo(20,90);
	ctx.lineTo(15,60);
	ctx.lineTo(0,30);
	ctx.lineTo(30,20);
	ctx.closePath();
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('五角星',33,130);
}

8. Dibuja la cabeza del gato.

Dibuja la forma de la cabeza del gato, el código es el siguiente:

function drawCat(){
	var c = document.getElementById("catCanvas");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(60,75,60,Math.PI*1.42,Math.PI*1.58);//顶
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(60,55,50,Math.PI*0.64,Math.PI*1.2);//左下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(55,55,50,Math.PI*1.82,Math.PI*0.38);//右下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(55,140,45,Math.PI*1.35,Math.PI*1.65);//下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(65,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(10,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(115,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(55,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('猫咪头形',33,130);
}

9. Dibuja la cabeza de zorro

Dibuja la forma de la cabeza del zorro, el código es el siguiente:

function drawFox(){
	var c = document.getElementById("foxCanvas");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(60,75,60,Math.PI*1.45,Math.PI*1.55);//顶
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(70,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(15,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(110,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(50,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(60,50,40,Math.PI*0.4,Math.PI*0.6); //底部
	ctx.lineTo(45,80); //左脸
	ctx.lineTo(2,50);
	ctx.lineTo(26,27);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.moveTo(92,30);//右脸
	ctx.lineTo(115,50);
	ctx.lineTo(75,80);
	ctx.lineTo(70,90);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('狐狸头形',33,130);
}

10. Dibujar la manzana

Para dibujar una forma de manzana, el código es el siguiente:

function drawApple(){
	var c = document.getElementById("appleCanvas");
	var ctx = c.getContext("2d");
 
	var img = new Image();
	img.width=100;
	img.height=100;
	img.src="apple.png";
	var id=setTimeout(function(){
		//console.log("超时执行");
		if(img.complete){
			ctx.drawImage(img, 10, 10,100,100);
			clearTimeout(id);
		}
	},100);
	
	ctx.font="12px Airal";
	ctx.strokeText('苹果形',35,130);
}

Tenga en cuenta que Canvas no solo puede dibujar gráficos, sino también agregar elementos de imagen. Dado que los gráficos de Apple son relativamente complejos, se dibuja dibujando un objeto de imagen.

11. Dibuja el rectángulo

Para dibujar un rectángulo, el código es el siguiente:

function drawRect(){
    var c = document.getElementById("rectCanvas");
    var ctx = c.getContext("2d");
 
    ctx.rect(10,10,100,80);
    ctx.stroke();
 
    ctx.font="12px Airal";
    ctx.strokeText('圆形',35,130);
}

12. Dibuja el hexágono

Dibuja el hexágono de la siguiente manera:

function drawSix(){
    var c = document.getElementById("sixCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    var centerX=50;
    var centerY=50;
    var radius=50;
    ctx.moveTo(centerX+radius*Math.cos(Math.PI*0),centerY+radius*Math.sin(Math.PI*0));
    for(var i=0;i<5;i++){
        ctx.lineTo(centerX+radius*Math.cos(Math.PI*(i+1)*(1/3)),centerY+radius*Math.sin(Math.PI*(i+1)*(1/3)));
    }
    ctx.closePath();
    ctx.stroke();
 
    ctx.font="12px Airal";
    ctx.strokeText('六边形',35,130);
}

Nota: El hexágono es equivalente a dividir el círculo en seis partes iguales y tomar seis vértices para la conexión, por lo que aquí se usa el bucle for para dibujar.

13. Dibujar diamantes

Dibuja una forma de diamante de la siguiente manera:

function drawDiamond(){
    var c = document.getElementById("diamondCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,5);
    ctx.lineTo(90,5);
    ctx.lineTo(110,35);
    ctx.lineTo(55,100);
    ctx.lineTo(0,35);
    ctx.closePath();
    ctx.stroke();
    ctx.font="12px Airal";
    ctx.strokeText('钻石形',33,130);
 
}

14. Dibujar barras angulares laterales

Para dibujar una barra larga con ángulos laterales, el código es el siguiente:

function drawCircleRect(){
    var c = document.getElementById("circleRectCanvas");
    var ctx = c.getContext("2d");
    var centerX=20;
    var centerY=5;
    ctx.beginPath();
    ctx.moveTo(centerX+ 15,centerY+ 5);
    ctx.lineTo(centerX+60,centerY+ 5);
    ctx.lineTo(centerX+60,centerY+ 80);
    ctx.arc(centerX+50,centerY+ 80,10,Math.PI*0,Math.PI*0.5);
    ctx.lineTo(centerX+5,centerY+ 90);
    ctx.lineTo(centerX+5,centerY+ 15)
    ctx.arc(centerX+15,centerY+ 15,10,Math.PI*1,Math.PI*1.5);
    ctx.closePath();
    ctx.stroke();
    ctx.font="12px Airal";
    ctx.strokeText('侧角长条形',30,130);
}

15. Dibujar los huevos

Dibuja la forma del huevo de la siguiente manera:

function drawEgg(){
    var c = document.getElementById("eggCanvas");
    var ctx = c.getContext("2d");
 
    ctx.rotate(10*Math.PI/180);
    var centerX=40;
    var centerY=2;
    ctx.beginPath();
    ctx.arc(centerX+30,centerY+ 60,30,Math.PI*0,Math.PI*1);
    ctx.lineTo(centerX+15,centerY+ 25);
    ctx.arc(centerX+35,centerY+ 25,20,Math.PI*1,Math.PI*0);
    ctx.lineTo(centerX+60,centerY+ 60);
    ctx.closePath();
    ctx.stroke();
    ctx.rotate(-10*Math.PI/180);
    ctx.font="12px Airal";
    ctx.strokeText('鸡蛋形',30,130);
}

Nota: Debido a que la forma del huevo está un poco torcida, se dibujó con una rotación.

Lo anterior es todo el contenido del uso de Canvas para dibujar gráficos en Html.

Supongo que te gusta

Origin blog.csdn.net/fengershishe/article/details/131751966
Recomendado
Clasificación
Diario
Más
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)

Code World

© 2018 codetd.com