English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Debido a que en los últimos dos años HTML5está muy de moda, por lo que he investigado un poco, últimamente tengo una idea que también requiere funciones relacionadas con HTML, por lo que también quiero aprender bien.
He mirado bien las funciones de Canvas, siento que HTML5Las funciones de interacción en el cliente se han vuelto cada vez más funcionales, hoy he visto la dibujo de Canvas, a continuación se presentan algunos ejemplos, apuntes para el uso posterior.
1、usar Canvas para dibujar una línea recta:
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
cans.moveTo(20,30);//El punto de partida primero
cans.lineTo(120,90);//El segundo punto
cans.lineTo(220,60);//El tercer punto (con el segundo punto como punto de partida)
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Las dos API utilizadas aquí, moveTo y lineTo, son las coordenadas de inicio y fin del segmento de línea, las variables son (coordenada X, coordenada Y), strokeStyle, stroke respectivamente estilo de dibujo del camino y dibujar el camino.
2、dibujar una línea de transición
La línea de transición gradual es el efecto de que los colores cambian gradualmente, por supuesto, el estilo de transición puede seguir la dirección del camino o no seguir la dirección del camino:
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
cans.moveTo(0,0);
cans.lineTo(400,300);
，我们可以创建一个渐变的矩形1 = cans.createLinearGradient(0,0,400,300);//Coordenadas de inicio y fin de la transición lineal
,'green');10,0);//Crear el color de inicio de la transición, 0 representa la cantidad de desplazamiento, personalmente entiendo que es la posición relativa en la línea, el máximo es1，se puede escribir cualquier cantidad de colores de transición en una transición
,'green');1gnt1,'yellow');
cans.lineWidth=3;
cans.strokeStyle = gnt1;
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
3、dibujar rectángulos o cuadrados:
Este cuadro rectangular si se utiliza HTML4solo se puede generar usando código en segundo plano, ahora HTML5Las funciones de Canvas proporcionadas pueden dibujarse fácilmente, por lo que HTML5Su ventaja es bastante alta.
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
cans.fillStyle = 'yellow';
cans.fillStyle = gnt30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Aquí se utiliza un método: fillRect () que, en términos de texto, también es rellenar un rectángulo, los parámetros aquí valen la pena mencionar, fillRect (X, Y, Ancho, Alto), esto es diferente de las coordenadas matemáticas, consulte específicamente
Aquí X, Y son el punto de partida en la esquina superior izquierda del Canvas, recuerde esto!
4、dibujar un cuadro rectangular simple
En el ejemplo anterior se habló de dibujar un bloque rectangular, relleno de color, este ejemplo solo dibuja un rectángulo sin implementar el efecto de relleno.
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
cans.strokeStyle = 'red';
cans.strokeRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Esto es muy simple, igual que en el ejemplo anterior, solo se reemplazó fill por stroke, detalles específicos, consulte el ejemplo anterior.
5、dibujar un rectángulo de transición lineal
La transición gradual es un efecto de relleno bastante bueno, combinado con ejemplos2Y ejemplos3，我们可以创建一个渐变的矩形
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
，我们可以创建一个渐变的矩形1 var gnt10= cans.createLinearGradient(39,0,
,'green');10,0);
,'green');1.addColorStop(0,'red');5.addColorStop(0.
,'green');1gnt1.addColorStop(
,'blue');1;
cans.fillStyle = gnt10cans.fillRect(10cans.fillRect(380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
,
6不解释了，记住fillRect（X,Y,Width,Height）就行了。
、填充一个圆形
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
圆形的用途很广，当然也包含了椭圆。//cans.fillStyle = 'green';
本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
cans.fill();
这里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；
arc中各参数比较：200,150,10a、cans.arc(
c、cans.arc(200,150,100,0,Math.PI/20,0,Math.PI,true);/,true);[
c、cans.arc(200,150,100,0,Math.PI/2,true);
d、cans.arc(200,150,100,0,Math.PI/2,false);
7、圆形区块
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
这里不解释了，和上边的例子相同，lineWidth是控制线条的宽度的。
8、圆形渐变
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d';
var gnt = cans.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
cans.fillStyle = gnt;
cans.fillRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px">4</canvas>
</body>
</html>
Es necesario explicar aquí el método createRadialGradient, los parámetros son (Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd), lo que significa que cuando realiza el desplazamiento gradual, utiliza dos círculos, uno es el círculo original y el otro es el círculo de desplazamiento gradual, de hecho, este método de control mediante coordenadas y radios puede lograr muchos estilos, como
Gradiente cónico
var gnt = cans.createRadialGradient(200,150,0,200,50,250); gnt.addColorStop(0,'red'); gnt.addColorStop(1'#333');
Esto es todo el contenido del artículo, espero que ayude a su aprendizaje y que todos apoyen el tutorial de grito.
Aviso: El contenido de este artículo se obtiene de Internet, es propiedad del autor original, el contenido se contribuye y sube por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.