Heim > Artikel > Web-Frontend > HTML5-Programmierpraxis Teil 2 – Verwenden von Animationen zum Wechseln der Bildcode-Fälle
HTML5-Programmierpraxis Teil 2 – Verwenden von Animationen zum Wechseln der Bildcode-Fälle
- 黄舟Original
- 2017-03-30 13:30:211712Durchsuche
Das in diesem Artikel verwendete Hauptwissen
Dieser Artikel verwendet hauptsächlich CanvasDie Methode drawImage in der API wird im Folgenden kurz vorgestellt.
Die Methode drawImage wird zum Zeichnen von Bildern in der Canvas-API verwendet. wie folgt definiert:
Die erste Methode hat drei Parameter. Der erste Parameter ist das zu zeichnende Bild (es kann auch ein Videoelement sein), x und y sind die Startpunkte des Bildes die Leinwand.context.drawImage(image,x,y); context.drawImage(image,x,y,w,h); context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
Die ersten drei haben beim Zeichnen die gleiche Bedeutung wie die erste Methode Bildskalierung.
Die dritte Methode hat die gleiche Bedeutung wie die ersten beiden Methoden. Die ersten vier der letzten acht Parameter nehmen ein Rechteck auf dem Quellbild auf Definieren Sie ein Rechteck. Die Funktion der gesamten Methode besteht darin, einen Teil des Quellbilds (den durch den zweiten bis fünften Parameter definierten Teil) auf die Leinwand (den durch die letzten vier Parameter definierten Teil) zu kopieren Dieser Artikel verwendet hauptsächlich die ersten drei Methoden zum Vervollständigen des ZeichnensQuellcode
Code-Analyse
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>用动画的形式切换图片</title>
<script type="text/javascript">
var width, height;
var context, image, functionId;
var drawLeft, drawWidth;
var drawTop, drawHeight;
var spaceWidth, spaceHeight;
var speed=5000;
var images = ["http://i.6.cn/cvbnm/4e/7e/bb/75f251a8e2ae935d598f17b4f8275060.jpg",
"http://i.6.cn/cvbnm/4a/6e/fb/805175016e502c483b75276f29801df3.jpg",
"http://i.6.cn/cvbnm/6a/72/18/1787a3b2754ef48e374bbd14635f5c36.jpg",
"http://i.6.cn/cvbnm/94/55/6c/b1ba743ba617be2891fa06b67d795511.jpg",
"http://i.6.cn/cvbnm/02/1b/04/8018ee9e5756ac6b30f27d7ad6396b03.jpg",
"http://i.6.cn/cvbnm/85/ea/d1/65f15857b971afb3b6e38b5fcdadc9c0.jpg"];
function selectFrom(iFirstValue, iLastValue) {
var iChoices = iLastValue - iFirstValue + 1;
return Math.floor(Math.random() * iChoices + iFirstValue);
} function showPicture(effects) {
var count = 0;
for (var o in effects) {
count++;
}
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
var currImage = 0;
image = new Image();
image.src = images[currImage];
context.drawImage(image, 0, 0, width, height);
currImage++;
if (count > 0) {
setInterval(function () {
var rand = selectFrom(0, count - 1);
image.src = images[currImage];
currImage++;
if (currImage == images.length) {
currImage = 0;
}
var index = 0;
for (var effect in effects) {
if (index++ == rand) {
effects[effect]();
break;
}
}
}, speed);
}
}
window.onload=function(){
showPicture({
leftToRight: function () {
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, width, height);
drawWidth = 0;
functionId = self.setInterval("drawleftToRight()", 10);
},
topToBottom: function () {
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, width, height);
drawHeight = 0;
functionId = self.setInterval("drawtopToBottom()", 10);
},
hcenter: function () {
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, width, height);
drawLeft = width / 2;
drawWidth = 0;
functionId = self.setInterval("drawhcenter()", 10);
},
vcenter: function () {
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, width, height);
drawTop = height / 2;
drawHeight = 0;
functionId = self.setInterval("drawvcenter()", 10);
},
hwindow: function () {
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, width, height);
spaceWidth = width / 10;
drawWidth = 0;
functionId = self.setInterval("drawhwindow()", 50);
},
vwindow: function () {
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, width, height);
spaceHeight = height / 10;
drawHeight = 0;
functionId = self.setInterval("drawvwindow()", 50);
},
hvwindow: function () {
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, width, height);
spaceHeight = height / 10;
spaceWidth = width / 10;
drawWidth = 0;
drawHeight = 0;
functionId = self.setInterval("drawhvwindow()", 50);
}
});
} function drawleftToRight() {
context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);
drawWidth = drawWidth + 2;
if (drawWidth > width) {
window.clearInterval(functionId);
}
} function drawtopToBottom() {
context.save();
context.drawImage(image, 0, 0, image.width, drawHeight, 0, 0, image.width, drawHeight);
drawHeight = drawHeight + 2;
if (drawHeight > height) {
window.clearInterval(functionId);
}
context.restore();
}
function drawhcenter() {
context.save();
context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);
drawLeft = drawLeft - 1;
drawWidth = drawWidth + 2;
if (drawLeft <= 0) {
window.clearInterval(functionId);
}
context.restore();
}
function drawvcenter() {
context.save();
context.drawImage(image, 0, drawTop, image.width, drawHeight, 0, drawTop, image.width, drawHeight);
drawTop = drawTop - 1;
drawHeight = drawHeight + 2;
if (drawTop <= 0) {
window.clearInterval(functionId);
}
context.restore();
} function drawhwindow() {
for (i = 0; i < 10; i++) {
context.drawImage(image, 0 + i * spaceWidth, 0, drawWidth,
image.height, 0 + i * spaceWidth, 0, drawWidth, image.height);
}
drawWidth += 1;
if (drawWidth - 1 > spaceWidth) {
window.clearInterval(functionId);
}
} function drawvwindow() {
context.save();
context.clearRect(0, 0, width, height);
for (i = 0; i < 10; i++) {
context.drawImage(image, 0, 0 + i * spaceHeight, image.width,
drawHeight, 0, 0 + i * spaceHeight, image.width, drawHeight);
}
drawHeight += 1;
if (drawHeight - 1 > spaceHeight) {
window.clearInterval(functionId);
}
context.restore();
} function drawhvwindow() {
context.save();
context.clearRect(0, 0, width, height);
for (i = 0; i < 10; i++) {
for (j = 0; j < 10; j++) {
context.drawImage(image, 0 + j * spaceWidth, 0 + i *
spaceHeight, drawWidth, drawHeight, 0 + j * spaceWidth, 0 + i *
spaceHeight, drawWidth, drawHeight);
}
}
drawHeight += height / width;
drawWidth += 1;
if (drawHeight > spaceHeight) {
context.drawImage(image, 0, 0, width, height);
window.clearInterval(functionId);
}
context.restore();
} </script></head><body>
<h1>用动画的形式切换图片</h1>
<canvas id="canvas" width="192px" height="255px"></canvas></body></html> drawleftToRight(): Der Effekt ist Anzeige von links nach rechts, hauptsächlich der vierte Parameter, der schrittweise von 0 auf die Breite des Bildes zunimmt drawtopToBottom(): Der Effekt besteht darin, von oben nach unten anzuzeigen, hauptsächlich durch Erhöhen Sie den fünften Parameter und den neunten Parameter schrittweise von 0 auf das Bild. Die Höhe von drawhcenter(): Der Effekt besteht darin, horizontal von der Mitte nach beiden Seiten anzuzeigen, wobei hauptsächlich der zweite und sechste Parameter von der Hälfte reduziert werden Breite des Bildes auf 0 und Erhöhen des vierten und achten Parameters von 0 auf die Bildbreite drawvcenter(): Der Effekt besteht darin, von der Mitte zu beiden Seiten anzuzeigen, ähnlich wie beim vorherigen drawhwindow(): Der Effekt sind horizontale Jalousien, ähnlich dem Prinzip der drawhcenter-Methode, außer dass er hier an mehreren Stellen ausgeführt wird drawvwindow(): Der Effekt sind vertikale Jalousien, ähnlich dem Prinzip der drawvcenter-Methode, außer dass sie von mehreren Stellen aus ausgeführt wird drawhvwindow(): Der Effekt ist Jalousien. Es ist eine Kombination aus drawhwindow() und drawvwindow() Jeder ist willkommen Fügen Sie es hinzu und verbessern Sie es Da das Bild auf anderen Websites platziert ist, wird es langsam geladen und ist nicht so flüssig. Bitte verwenden Sie es durch diese
Karte
, um bessere Ergebnisse zu erzielen.
Das obige ist der detaillierte Inhalt vonHTML5-Programmierpraxis Teil 2 – Verwenden von Animationen zum Wechseln der Bildcode-Fälle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-Programmierpraxis Teil eins – Beispielcode-Sharing für die Implementierung der HTML5-UhrNächster Artikel：HTML5-Programmierpraxis Teil eins – Beispielcode-Sharing für die Implementierung der HTML5-Uhr
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen