Tutorial H5

HTML5编程实战之二-使用动画的形式切换图片代码案例

黄舟

Mar 30, 2017 pm 01:30 PM

本文主要用到的知识

　　本文主要用到了Canvas API中的drawImage方法，下面对此方法略做介绍。

　　在Canvas API中绘制图像用drawImage方法，这是一个重载方法，定义如下：

context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

　　第一个方法有三个参数，第一个参数为要绘制的图像(还可以是video元素)，x和y为该图像在画布中的起始坐标。

　　第二个方法有五个参数，前三个跟第一个方法意义一样，w和h指绘制时的图像宽度和高度，可以用来进行图像缩放。

　　第三个方法有九个参数，第一个参数跟前二个方法意义相同，后八个参数中前四个在源图像上一取一个矩形，后四个参数用于在画布上定义一个矩形，整个方法的作用就是把源图像上部分区域(第二到五个参数定义的部分)复制到画布上(后四个参数定义的部分)。

　　本文主要利用了第三个方法完成绘制。

源代码

<!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(&#39;canvas&#39;);
            context = canvas.getContext(&#39;2d&#39;);
            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()：效果为从左向右显示，主要把第四个参数和第八个参数从0逐渐增加到图片的宽度

　　drawtopToBottom()：效果为从上向下显示，主要把第五个参数和第九个参数从0逐渐增加到图片的高度

　　drawhcenter()：效果为从中间水平向两边显示，主要把第二、六个参数从图像宽度的一半减小到0，第四、八个参数从0增加到图像宽度

　　drawvcenter()：效果为从中间向上下两边显示，跟上一个类似

　　drawhwindow()：效果为水平方向百叶窗，跟drawhcenter方法原理类似，只是这里是从多个地方进行的

　　drawvwindow()：效果为垂直方面百叶窗，跟drawvcenter方法原理类似，只是这里是从多个地方进行的

　　drawhvwindow()：效果为百叶窗，是drawhwindow()跟drawvwindow()的组合

　　欢迎大家补充和完善。

　　由于图片是放在其他网站上，所以加载比较慢，显的不是那么流畅，大家使用时可以换为本地图片，效果更佳。

Atas ialah kandungan terperinci HTML5编程实战之二-使用动画的形式切换图片代码案例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Blok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AM

Unsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.

HTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AM

Tidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.

HTML5: Blok Bangunan Web Moden (H5)Apr 21, 2025 am 12:05 AM

HTML5 adalah versi terkini bahasa markup hiperteks, yang diseragamkan oleh W3C. HTML5 memperkenalkan tag semantik baru, sokongan multimedia dan peningkatan bentuk, meningkatkan struktur web, pengalaman pengguna dan kesan SEO. HTML5 memperkenalkan tag semantik baru, seperti,, dan lain -lain, untuk menjadikan struktur laman web lebih jelas dan kesan SEO lebih baik. HTML5 menyokong elemen multimedia dan tiada pemalam pihak ketiga diperlukan, meningkatkan pengalaman pengguna dan kelajuan memuatkan. HTML5 meningkatkan fungsi bentuk dan memperkenalkan jenis input baru seperti, dan lain -lain, yang meningkatkan pengalaman pengguna dan membentuk kecekapan pengesahan.

Kod H5: Menulis HTML5 Bersih dan CekapApr 20, 2025 am 12:06 AM

Bagaimana cara menulis kod HTML5 yang bersih dan cekap? Jawapannya adalah untuk mengelakkan kesilapan biasa dengan tag semantik, kod berstruktur, pengoptimuman prestasi dan mengelakkan kesilapan biasa. 1. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Pastikan kod berstruktur dan boleh dibaca, menggunakan lekukan dan komen yang sesuai. 3. Mengoptimumkan prestasi dengan mengurangkan tag yang tidak perlu, menggunakan CDN dan kod pemampatan. 4. Elakkan kesilapan biasa, seperti tag tidak ditutup, dan pastikan kesahihan kod.

H5: Bagaimana ia meningkatkan pengalaman pengguna di webApr 19, 2025 am 12:08 AM

H5 meningkatkan pengalaman pengguna web dengan sokongan multimedia, penyimpanan luar talian dan pengoptimuman prestasi. 1) Sokongan multimedia: H5 dan Elemen Memudahkan pembangunan dan meningkatkan pengalaman pengguna. 2) Penyimpanan Luar Talian: WebStorage dan IndexedDB membenarkan penggunaan luar talian untuk meningkatkan pengalaman. 3) Pengoptimuman Prestasi: Pekerja web dan elemen mengoptimumkan prestasi untuk mengurangkan penggunaan jalur lebar.

Dekonstruktur Kod H5: Tag, Elemen, dan AtributApr 18, 2025 am 12:06 AM

Kod HTML5 terdiri daripada tag, elemen dan atribut: 1. Tag mentakrifkan jenis kandungan dan dikelilingi oleh kurungan sudut, seperti. 2. Unsur terdiri daripada tag permulaan, kandungan dan tag akhir, seperti kandungan. 3. Atribut menentukan pasangan nilai utama dalam tag permulaan, meningkatkan fungsi, seperti. Ini adalah unit asas untuk membina struktur web.

Memahami Kod H5: Asas HTML5Apr 17, 2025 am 12:08 AM

HTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.

Kod H5: Amalan Terbaik untuk Pemaju WebApr 16, 2025 am 12:14 AM

Amalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang laluByDDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

4 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.