English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Poiché HTML5 è diventato popolare negli ultimi due anni, ho studiato un po', recentemente ho avuto un'idea che anche utilizzerà le funzioni relative a HTML, quindi devo studiare bene.
Ho guardato bene le funzioni di Canvas, sento che le funzionalità di interazione client-side di HTML5 stanno diventando sempre più forti, oggi ho guardato la grafica di Canvas, ecco alcuni esempi, prendo nota per future esigenze.
1、Usa Canvas per disegnare una linea:
<!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);//Il primo punto di partenza
cans.lineTo(120,90);//Il secondo punto
cans.lineTo(220,60);//Il terzo punto (partendo dal secondo punto)
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Le due API utilizzate qui, moveTo e lineTo, sono le coordinate di partenza e di arrivo del segmento di linea, il valore delle variabili è ( Coordinate X, Coordinate Y ), strokeStyle, stroke sono lo stile di disegno del percorso e il disegno del percorso.
2、Disegna la linea di gradiente
La linea di gradiente ha un effetto di cambiamento di colore, ovviamente lo stile di gradiente può seguire la direzione del percorso o non seguire la direzione del percorso:
<!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);
var gnt1 = cans.createLinearGradient(0,0,400,300);//La linea di gradiente lineare di partenza e di arrivo
gnt1.addColorStop(0,'red'); // crea il colore di inizio della gradazione, 0 rappresenta la quantità di spostamento, personalmente lo interpreto come la posizione relativa sulla retta, il valore massimo è 1, in una gradazione possono essere scritti qualsiasi numero di colori di gradazione
gnt1.addColorStop(1,'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、disegnare un rettangolo o un quadrato:
Questo tipo di cornice rettangolare può essere creato solo con codice di back-end utilizzando HTML4, ora la funzione Canvas fornita da HTML5 può disegnare facilmente, quindi l'uguaglianza di HTML5 è molto 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.fillRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Qui viene utilizzato un metodo - fillRect() che, dal nome, può essere riconosciuto come riempimento di un rettangolo, i parametri sono valutabili, è diverso dai coordinate matematiche, dettagli vedi
Qui X, Y sono relativi al punto di partenza in alto a sinistra del Canvas, ricordalo bene!!
4、disegnare un semplice cerchio
Nell'esempio precedente è stato spiegato come disegnare un rettangolo, riempito di colore, questo esempio disegna semplicemente un rettangolo senza implementare l'effetto di riempimento.
<!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>
Questo è molto semplice, come nell'esempio precedente, è sufficiente sostituire fill con stroke, dettagli vedi l'esempio precedente.
5、disegnare un rettangolo lineare con gradazione
La gradazione è un ottimo effetto di riempimento, combinando l'esempio 2 e l'esempio 3, possiamo creare un rettangolo con gradazione.
<!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 gnt1 = cans.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Non spiegare, ricordati fillRect(X,Y,Larghezza,Altura) è sufficiente.
6、riempire un cerchio
L'uso del cerchio è molto ampio, ovviamente include anche l'ellisse.
<!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';//originariamente qui si usava 'red', guardando lo screenshot, ho fatto un salto di sorpresa, ho paura di essere picchiato dai patrioti in strada, in realtà, tu lo sai~~
cans.fill();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
L'uso del metodo arc qui è arc(X,Y,Raggio,Angolo di Inizio(Arco),Angolo di Fine(Arco),AntiOraologio), il che significa (Coordinate X del centro del cerchio, Coordinate Y del centro del cerchio, Raggio, Angolo di Inizio (Radianti), Angolo di Fine (Radianti), Disegnare in senso antiorario);
Confronto tra i parametri di arc:
a、cans.arc(200,150,100,0,Math.PI,true);
c、cans.arc(200,150,100,0,Math.PI/2,true);[/code]
c、cans.arc(200,150,100,0,Math.PI/2,true);
d、cans.arc(200,150,100,0,Math.PI/2,false);
7、Area circolare
<!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>
Non viene spiegato, è lo stesso esempio precedente, lineWidth controlla la larghezza della linea.
8、Circolare progressione
<!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>
Deve essere chiarito che il metodo createRadialGradient, i parametri sono (Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd), che significa che durante l'esecuzione della trasformazione, utilizza due cerchi, uno è il cerchio originale, l'altro è il cerchio di transizione. In realtà, questo tipo di controllo di coordinate e raggio può realizzare molti stili, come
Cerchio tridimensionale
var gnt = cans.createRadialGradient(200,150,0,200,50,250); gnt.addColorStop(0,'red'); gnt.addColorStop(1,'#333');
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e ti preghiamo di supportare e applaudire il manuale di insegnamento.
Dichiarazione: il contenuto di questo articolo è stato preso da Internet, di proprietà dei rispettivi autori, il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.