首页 / CANVAS / 教你做炫酷的碎片式图片切换 (canvas)

教你做炫酷的碎片式图片切换 (canvas)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了教你做炫酷的碎片式图片切换 (canvas)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4836字，纯文字阅读大概需要7分钟。

内容图文

前言

老规矩，先上 DEMO 和源码。图片区域是可以点击的，动画会从点击的位置开始发生。

本来这个效果是我3年前做的，只是当是是用无数个 div 标签完成的，性能比较成问题，在移动端完全跑不动。最近心血来潮想学习一个做 CSS 效果很厉害的大神用纯 CSS 实现，无奈功力不够只能放弃，最终选择用 canvas 来完成了。

技术分享

准备工作

1. 首先准备相同尺寸的图片若干张，本例中图片尺寸均为 1920 * 1080（注意：这里的尺寸是原始图片的尺寸，不是通过 css 显示在页面上的尺寸）。为方便之后的使用，将这些图片加入 HTML 中一隐藏元素里备用。

            <
            div 
            class
            =‘hide‘
            >
            <
            img 
            class
            =‘img‘ 
            src
            =‘./images/a.jpg‘ 
            />
            <
            img 
            class
            =‘img‘ 
            src
            =‘./images/b.jpg‘ 
            />
            <
            img 
            class
            =‘img‘ 
            src
            =‘./images/c.jpg‘ 
            />
            <
            img 
            class
            =‘img‘ 
            src
            =‘./images/d.jpg‘ 
            />
            <
            img 
            class
            =‘img‘ 
            src
            =‘./images/e.jpg‘ 
            />
            </
            div
            >

            .hide {
    display: none;
}

2. 在 HTML 中插入 canvas 画布，尺寸自定，但必须保证与图片资源宽高比一致。本例中画布尺寸为 800 * 450。

            <
            canvas 
            id
            ="myCanvas"
             width
            ="800"
             height
            ="450"
            >您的浏览器不支持 CANVAS</canvas>

3. 基础代码如下，首先获取画布的 context 对象；其次获取图片对象；最后通过 drawImage 方法将图片绘制出来。

            var ctx = document.querySelector(‘#myCanvas‘).getContext(‘2d‘),
    img = document.querySelector(‘.img‘);

ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.stroke();

实现

相信很多人看完很快就能明白，这是用若干个小的单元组合在一起，每个单元只负责绘制图片的一小部分，最后拼在一起就成了一张完整的图片。

那么在具体讲解源码之前，先让我们来复习一下 canvas 中 drawImage 函数的用法。由于我们需要用到该函数9个参数的情况，参数较多，需要牢记这些参数的意义和参考的对象。

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

· img：规定要使用的图像、画布或视频

· sx：开始剪切的 x 坐标位置

· sy：开始剪切的 y 坐标位置

· swidth：被剪切图像的宽度

· sheight：被剪切图像的高度

· x：在画布上放置图像的 x 坐标位置

· y：在画布上放置图像的 y 坐标位置

· width：要使用的图像的宽度

· height：要使用的图像的高度

我相信即使将上面这些参数罗列出来，在开发的时候还是很容易晕。这里推荐给大家一个小技巧：除去第一个 img 参数以外还有8个参数，其中前4个参数的尺寸参考的对象是原图，即 1920 * 1080；后4个参数的尺寸参考的对象是画布，即 800 * 450。

记住这个口诀，在实际编写的时候就不容易晕了。

分格

分格是要定下在画布中一个单元的尺寸，最重要的是单元尺寸可以被画面的两条边长所整除，即单元尺寸应为画面宽高的公约数。公约数不一定是最大公约数或最小公约数，因为过大效果不够炫，过小性能会有压力。

以本例画板 800 * 450 的尺寸为例，我这里选取 25 * 25 为单元尺寸，即整个画布由 32 * 18 共 576 个单元格组成。分好格之后我们需要先计算一些基本的参数备用。

var imgW = 1920, //图片原始宽/高
    imgH = 1080;

var conW = 800, //画布宽/高
    conH = 450;

var dw = 25, //画布单元格宽/高
    dh = 25;

var I = conH / dh, //单元行/列数
    J = conW / dw;

var DW = imgW / J, //原图单元格宽/高
    DH =imgH / I;

前三组参数是我们之前定下的，需要注意的，在算第四组行/列数时要清楚：行数 = 画布高度 / 单元格高度；列数 = 画面宽度 / 单元格宽度。如果这点搞反了，后面就蒙逼了。最后一组 DW/DH 是放大换算到原图上的单元格尺寸，用于后面裁切图片使用。

绘制

循序渐进，我们先绘制最左上角的那个单元格。因为其原图裁切位置与画布摆放位置都是 (0, 0)，所以最简单。

ctx.drawImage(img, 0, 0, DW, DH, 0, 0, dw, dh);

技术分享

成功了。那现在要绘制第2行，第3列的图片该怎么写呢。

            var i = 2,
    j = 3;
ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);

这里容易搞混的是：裁剪或摆放的横坐标为单元格宽度 * 列号，纵坐标为单元格高度 * 行号。

技术分享

为了方便，封装一个负责渲染的纯净函数，其不参与逻辑，只会根据传入的图片对象及坐标进行绘制。

            function
             handleDraw(img, i, j) {
    ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
}

封装好渲染方法之后，通过行数和列数的双重循环把整张图片渲染出来。

            ctx.beginPath();


            for (var i = 0; i < I; i ++) {
    for (var j = 0; j < J; j ++) {
        handleDraw(img, i, j);
    }
}

ctx.closePath();
ctx.stroke();

技术分享

完美~。其实到这一步核心部分就完成了，为什么呢？因为此时这幅图片已经是由几百个单元格拼合而成的，大家可以凭借天马行空的想像赋予其动画效果。

在分享自己的动画算法之前，先给大家看下拼错是什么样的~

技术分享

还有点炫酷~

动画算法

下面分享下我的动画算法。Demo 里的效果是怎么实现的呢？

由于在画布的网格上，每个单元格都有行列号（i，j）。我希望能给出一个坐标（i，j）后，从近到远依次得出坐标周围所有菱形上的点。具体如下图，懒得做图了~

技术分享

比如坐标为（3，3）

距离为 1 的点有（2，3）、（3，4）、（4，3）、（3，2）共4个；

距离为 2 的点有（1，3）、（2，4）、（3，5）、（4，4）、（5，3）、（4，2）、（3，1）、（2，2）共8个；

........

求出这一系列点的算法也很容易，因为菱形线上的点与坐标的行号差值的绝对值 + 列号差值的绝对值 = 距离，具体如下：

            function
             countAround(i, j, dst) {
    
            var resArr = [];
    for (var m = (i-dst); m <= (i+dst); m++) {
        for (var n = (j-dst); n <= (j+dst); n++) {
            if ((Math.abs(m-i) + Math.abs(n-j) == dst)) {
                resArr.push({x: m, y: n});
            }
        }
    }
    return resArr;
}

该函数用于给定坐标和距离（dst），求出坐标周围该距离上的所有点，以数组的形式返回。但是上面的算法少了边界限制，完整如下：

            countAround(i, j, dst) {
    
            var resArr = [];
    for (var m = (i-dst); m <= (i+dst); m++) {
        for (var n = (j-dst); n <= (j+dst); n++) {
            if ((Math.abs(m-i) + Math.abs(n-j) == dst) && (m >=0 && n >= 0) && (m <= (I-1) && n <= (J-1))) {
                resArr.push({x: m, y: n});
            }
        }
    }
    return resArr;
}

这样我们就有了一个计算周围固定距离上所有点的纯净函数，接下来就开始完成动画渲染了。

首先编写一个用于清除单元格内容的清除函数，只需要传入坐标，就能清除该坐标单元格上的内容，等待之后绘制新的图案。

            handleClear(i, j) {
    ctx.clearRect(dw*j, dh*i, dw, dh);
}

anotherImg 为下一张图，最后通过 setInterval 不断向外层绘制新的图片完成碎片式的渐变效果。

            var dst = 0,
intervalObj = setInterval(function() {
    var resArr = countAround(i, j, dst);

    resArr.forEach(function(item, index) {
        handleClear(item.x, item.y);
        handleDraw(anotherImg, item.x, item.y);
    });
        
    if (!resArr.length) {
        clearInterval(intervalObj);
    }
    dst ++;
}, 20);

当 countAround 返回的数组长度为0，即到坐标点该距离上的所有点都在边界之外了，就停止定时器循环。至此所有核心代码已经介绍完毕，具体实现请查看源码。

现在给定画布上任意坐标，就能从该点开始向四周扩散完成碎片式的图片切换效果。

在自动轮播时，每次从预设好的8个点（四个角及四条边的中点）开始动画，8个点坐标如下：

            var randomPoint = [{
    x: 0,
    y: 0
}, {
    x: I - 1,
    y: 0
}, {
    x: 0,
    y: J - 1
}, {
    x: I - 1,
    y: J - 1
}, {
    x: 0,
    y: Math.ceil(J / 2)
}, {
    x: I - 1,
    y: Math.ceil(J / 2)
}, {
    x: Math.ceil(I / 2),
    y: 0
}, {
    x: Math.ceil(I / 2),
    y: J - 1
}]

点击时，则算出点击所在单元格坐标，从该点开始动画。

            function
             handleClick(e) {
    
            var offsetX = e.offsetX,
    　　offsetY = e.offsetY,
    　　j = Math.floor(offsetX / dw),
    　　i = Math.floor(offsetY / dh),
    
    //有了i, j，开始动画...    
},

目前该效果只是 Demo 阶段，有空的话会将该效果插件化，方便有兴趣的朋友使用。

感谢你的浏览，希望能有所帮助

原文：http://www.cnblogs.com/ghost-xyx/p/7240282.html

内容总结

以上是互联网集市为您收集整理的教你做炫酷的碎片式图片切换 (canvas)全部内容，希望文章能够帮你解决教你做炫酷的碎片式图片切换 (canvas)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1186332.html

来源：【匿名】

【上一篇】canvas画布的宽高应写在

【下一篇】基于canvasJS在PHP中制作动态图表详解

更多 ►

【教你做炫酷的碎片式图片切换 (canvas)】教程文章相关的互联网学习教程文章

C# WPF Canvas背景图片设置【代码】

public MainWindow(){InitializeComponent();//初始化Image image = new Image();//新建图片对象image.Source = new BitmapImage(new Uri("G:\\个人成长\\认知\\互联网\\.NET\\常用UI资源\\背景图片\\1.jpg"));//读取图片ImageBrush ib = new ImageBrush();//新建图片对象ib.ImageSource = image.Source;//赋值为背景图片canvasLogin.Background = ib;//将图片对象赋值给Canvas的Background}

c#-您如何访问WPF Canvas类的子级？【代码】

您如何访问WPF画布类的孩子？这是一个很棒的课程,我喜欢您如何添加孩子.但是一旦它们出现,您如何看待它们以阅读其状态和内容.我知道将子级放到XAML中很容易.但是,如果您在运行时将子级动态添加到画布上怎么办？解决方法:您可以使用Children属性. 编辑：这是一个遍历子项并通过索引获得子项的示例：foreach (UIElement child in canvas.Children) {// ... } // Or: int index = 0; var childByIndex = canvas.Children[index];

c#-加快在WPF中将对象添加到Canvas的速度【代码】

我在WPF中使用了Canvas来绘制许多彩色矩形,但是添加它们时程序运行速度非常慢.我尝试了不同的选择,例如将它们添加到数组中并一次全部添加,并使用Image而不是Canvas来支付它们,但是它们似乎做得并不多.我有将代码引导到线程中的图形,但是由于C#规则,我必须在主线程中包含图形部分.我还应该注意,问题出在我的计算机上(它运行的是带有14GB DDR2 RAM的Intel Core i7). 这是添加矩形的代码.它已运行超过83,000次.private void AddBlock(...

c#-将inkCanvas中的图像另存为png或jpeg文件【代码】

这是我的WPF代码< InkCanvas x：Name =“ inkCanvas” Margin =“ 9,325,210,193” Background =“ Azure”>< / InkCanvas>还有一个按钮当按下按钮时,我想将绘制的图像保存到文件中.这是我的代码private void button1_Click(object sender, RoutedEventArgs e){int margin = (int)inkCanvas.Margin.Left;int width = (int)inkCanvas.ActualWidth - margin;int height = (int)inkCanvas.ActualHeight - margin;RenderTargetBitmap r...

c – 当我的程序“无响应”时,为什么我的paintBox Canvas被删除？

我用Borland的C builder编写了一个小程序,顺便说一句,一切似乎都很好.我的程序有一个地图窗口和一个表格窗口,当用户按下按钮时,会启动一个长进程,读取所有地图和表格信息,然后显示该信息.每次我通过调试器运行它,我都没有问题.然后今天,我决定测试它而不通过调试器运行它.令我恐惧的是,该程序读取地图信息,然后在没有问题的情况下将其显示在paintbox画布上,但是当它加载网格的信息时,地图会被删除！它似乎发生在表的加载阶段.这需要...

c# – 按标签删除Canvas Child【代码】

我有一个椭圆(prew),我想通过标签(“p”)从canvas(canvas1)中删除.我试过这个,但它不起作用：var child = (from c in canvas1.Childrenwhere "p".Equals(c.Tag)select c).First(); canvas1.Children.Remove(child);它给了我这个错误：“Could not find an implementation of the query pattern for source type‘System.Windows.Controls.UIElementCollection’. ‘Where’ not found.Consider explicitly specifying the type of...

在Canvas WPF c#中拖动并选择并重新调整元素大小

现在我可以使用mousedown和mousemove事件在画布上绘制矩形我想选择矩形并在画布中拖动它们(移动)并调整它们的大小怎么样？解决方法:http://www.codeproject.com/KB/WPF/WPF_DrawTools.aspx 即使您的实现比此示例更简单,您仍然可以从示例中学习如何进行命中测试,选择,组选择,绘制调整大小句柄,更改z顺序,最后移动和调整对象大小.请注意,这是一种低级Winforms风格的解决方案.您可以使用高级WPF支持获得类似的功能.

c# – wpf canvas双击【代码】

我试图在画布上从用户那里获取双击.我正在使用previewmousedown事件,但它无法正常工作. 功能如下：void DrawCanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e){/* Check if it is a double click */if(e.ChangedButton == MouseButton.Left && e.ClickCount == 2){//do double click actions}else{//do single click actions}e.Handled = true;}我也尝试将它移动到previewmouseup函数,但clickcount保持在...

c# – 检查Canvas XAML中的矩形是否相交【代码】

我有一个画布,我画了不同的矩形.我在集合中有矩形坐标.每次将一个矩形添加到画布时,我需要检查它是否超过其他现有矩形.我检查画布中每个现有矩形的新矩形,以了解矩形是否与任何其他矩形重叠.这是最有效的解决方案吗？foreach(System.Windows.Shapes.Rectangle r in rectCollection){IntersectionDetail d1 = r.RenderedGeometry.FillContainsWithDetail(this.rect.RenderedGeometry);if(d1 == IntersectionDetail.Intersects){Mess...

javascript – 是否有任何HTML5 Canvas实现嵌入c

我正在研究基于浏览器的游戏atm,并且已经在研究将其移植到其他平台的选项,例如控制台或在Web浏览器中播放可能不适合的设备. 游戏几乎都是通过2D画布上下文完成渲染的JavaScript. 我希望的是已经有一个c库/ api可以与google的v8引擎一起工作来处理JavaScript中的画布调用并用opengl或类似的东西渲染它们有谁知道可能提供此功能的项目？否则你会怎么想我在j中嵌入我的javascript,尽可能少的更改javascript,因为我真的不想在平台之间...

c# – WPF Canvas.GetLeft()始终接收NaN值【代码】

我试图在WPF中获得控件的左侧.但我总是收到NaN值而不是双倍值.这是我正在尝试的： XAML：<Canvas Canvas.Left="230" Name="cnvSaver"><Border Focusable="False" BorderBrush="#7FBFA379" BorderThickness="0 1" Width="460" Height="460"><Canvas Background="#3FFFFFFF" AllowDrop="True" Name="cnvViewerLower" Drop="cnvViewerLower_Drop" Height="460" Width="460"></Canvas></Border><Border Focusable="False" Name="borUp...

c# – 为什么在Canvas上使用剪切坐标显示GeometryDrawing？【代码】

我有以下简单的代码绘制矩形<Canvas Name="MainImageLayer" ><Image ><Image.Source ><DrawingImage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ><DrawingImage.Drawing > <DrawingGroup><DrawingGroup.Children><GeometryDrawing><GeometryDrawing.Pen><Pen Brush="#FF1acc33" Thickness="1" /></GeometryDrawing.Pen><GeometryDrawing.Brush><SolidColorBrush>Red</SolidCo...

c# – 检测WPF Canvas上两个矩形之间的碰撞【代码】

我对编程非常陌生,我从C#开始.我现在正试图制作我的第一场比赛,我决定使用蛇.到目前为止,我一直在努力研究这个问题,但我看到的所有答案都与那些使用不同方法移动蛇的人有关. 我的程序使用两个双打(左和上)来存储蛇在画布上的位置.我的程序还使用两个双打作为游戏中的“食物”,称为randomFoodSpawnLeft和randomFoodSpawnTop. 我的问题是这个.如何通过左侧和顶部值检测两个矩形对象之间的碰撞？我很困惑. snakeWindow是Window,snakeH...

c# – xamarin crossplatform canvas

我正在调查Xamarin作为我们的跨平台解决方案的选项.对我们而言,我们可以创建自己的自定义交互式控件至关重要. 我见过的例子(http://devcenter.wintellect.com/jprosise/supercharging-xamarin-forms-with-custom-renderers-part-5)展示了如何创建自定义渲染控件.不幸的是,他们都基本上展示了如何根据平台不同地渲染到Canvas.这对我们来说是不可接受的. 是否有真正的跨平台方式来创建Xamarin自定义渲染控件而无需在每个平台特定实现...

c# – WinRT：如何确保在Canvas上以像素完美的方式绘制图像？【代码】

我在Windows运行时环境中将Image实例添加到Canvas,并且在140和180刻度分辨率显示时,我的图像不断放大,它在刻度分辨率100中看起来很完美.我尝试创建3个PNG图像,每个刻度尺寸一个：100 ,140,180但它仍然可以扩展它们,它们看起来很模糊.我在青色背景上创建了一个带有4个黑色像素的测试图像,我从模拟器中截取了一个截图,看看图像是如何模糊的,我的原始图像只有4个完美的黑色像素：我尝试更改我的Image对象的拉伸模式,但它什么也没做.我...

CANVAS - 相关标签

canvas动画

CANVAS - 最热教程

javascript – 如何通过z-index对这些c...微信小程序利用Canvas绘制图片和竖排文...微信小程序使用CANVAS绘制图片及图片圆...Canvas跨域的解决方案介绍 javascript – 使用图像创建Canvas元素...Python3 tkinter基础 Canvas create_po...HTML5 Canvas核心技术—图形、动画与游...微信小程序简单的canvas裁剪图片功能详...Vue中使用canvas方法总结关于HTML5Canvas的事件处理

首页 / CANVAS / 教你做炫酷的碎片式图片切换 (canvas)

教你做炫酷的碎片式图片切换 (canvas)

内容导读

内容图文

内容总结

内容备注

内容手机端

【教你做炫酷的碎片式图片切换 (canvas)】教程文章相关的互联网学习教程文章

CANVAS - 相关标签

CANVAS - 最新教程

CANVAS - 最热教程