<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. canvas绘图按照contain或者cover方式适配并居中显示

          发布时间:2019-02-18 16:22:04   作者:芝麻糊   我要评论

        这篇文章主要介绍了canvas绘图按照contain或者cover方式适配并居中显示的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

        canvas绘图时drawImage,需要绘制的图片大小不同,比例各异,所以就需要像html+css布局那样,需要contain和cover来满足不同的需求。

        contain

        保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。

        图片按照contain模式放到固定盒子的矩?#25991;冢?#21017;需要对图片进行一定的缩放。

        原则是:

        如果图片宽高不等,使图片的长边能完全显示出来,则原图片高的一边缩放后等于固定盒子对应的一边,等比例求出另外一边,

        如果图片宽高相等,则根据固定盒子的宽高来决定缩放后图片的宽高,固定盒子的宽大于高,则缩放后的图片高等于固定盒子的高度,对应求出另外一边即可,反之亦然。

                /**
                 * @param {Number} sx 固定盒子的x坐标,sy 固定盒子的y左标
                 * @param {Number} box_w 固定盒子的宽, box_h 固定盒子的高
                 * @param {Number} source_w 原图片的宽, source_h 原图片的高
                 * @return {Object} {drawImage的参数,缩放后图片的x坐标,y坐标,宽和高},对应drawImage(imageResource, dx, dy, dWidth, dHeight)
                 */
                function containImg(sx, sy , box_w, box_h, source_w, source_h){
                    var dx = sx,
                        dy = sy,
                        dWidth = box_w,
                        dHeight = box_h;
                    if(source_w > source_h || (source_w == source_h && box_w < box_h)){
                        dHeight = source_h*dWidth/source_w;
                    dy =  sy + (box_h-dHeight)/2;
        
                    }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){
                        dWidth = source_w*dHeight/source_h;
                        dx = sx + (box_w-dWidth)/2;
                    }
                    return{
                        dx,
                        dy,
                        dWidth,
                        dHeight
                    }
                }
        
        
                var c=document.getElementById("myCanvas");
                var ctx=c.getContext("2d");
                ctx.fillStyle = '#e1f0ff';
                //固定盒子的位置和大小--图片需要放在这个盒子内
                ctx.fillRect(30, 30, 150, 200);
        
                var img = new Image();
                img.onload = function () {
                    console.log(img.width,img.height);
                    
                    var imgRect = containImg(30,30,150,200,img.width,img.height);
                    console.log('imgRect',imgRect);
                    ctx.drawImage(img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight); 
                    
                }
                img.src = "./timg2.jpg";  
                //注:img预加载模式下,onload应该放在为src赋值的上面,以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生

        cover

        保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

        原理:

        按照固定盒子的比例截取图片的部分

                /**
                 * @param {Number} box_w 固定盒子的宽, box_h 固定盒子的高
                 * @param {Number} source_w 原图片的宽, source_h 原图片的高
                 * @return {Object} {截取的图片信息},对应drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)参数
                */
                function coverImg(box_w, box_h, source_w, source_h){
                    var sx = 0,
                        sy = 0,
                        sWidth = source_w,
                        sHeight = source_h;
                    if(source_w > source_h || (source_w == source_h && box_w < box_h)){
                        sWidth = box_w*sHeight/box_h;
                        sx = (source_w-sWidth)/2;
                    }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){
                        sHeight = box_h*sWidth/box_w;
                        sy = (source_h-sHeight)/2;
                    }
                    return{
                        sx,
                        sy,
                        sWidth,
                        sHeight
                    }
                }
        
        
                var c=document.getElementById("myCanvas");
                var ctx=c.getContext("2d");
                ctx.fillStyle = '#e1f0ff';
                //固定盒子的位置和大小--图片需要放在这个盒子内
                ctx.fillRect(30, 30, 150, 200);
        
                var img = new Image();
                img.onload = function () {
                    console.log(img.width,img.height);
                    
                    var imgRect = coverImg(150,200,img.width,img.height);
                    console.log('imgRect',imgRect);
                    ctx.drawImage(img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); 
                }
                img.src = "./timg2.jpg";  
                //注:img预加载模式下,onload应该放在为src赋值的上面,以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生

        以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

        相关文章

        • h5网页水印SDK的实现代码示例

          这篇文章主要介绍了h5网页水印SDK的实现代码示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-02-19
        • canvas绘图按照contain或者cover方式适配并居中显示

          这篇文章主要介绍了canvas绘图按照contain或者cover方式适配并居中显示的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
          2019-02-18
        • Canvas 文本转粒?#26377;?#26524;的实现代码

          这篇文章主要介绍了Canvas 文本转粒?#26377;?#26524;的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-02-14
        • canvas 橡皮筋式线条绘图应用方法

          这篇文章主要介绍了canvas 橡皮筋式线条绘图应用方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-02-13
        • web页面?#35745;?#23454;现

          这篇文章主要介绍了web页面?#35745;?#23454;现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
          2019-02-12
        • Canvas系列之滤镜效果

          Canvas 真的是一个神奇的东西,不仅能够绘制各种图形、文本和位图,还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西,其实 Canvas 也可以来实现。本文介绍了Can
          2019-02-12
        • canvas学习总结三之绘制路径-线段

          这篇文章主要介绍了canvas学习总结三之绘制路径-线段的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
          2019-01-31
        • 移动端Html5中百度地图的点击事件

          这篇文章主要介绍了移动端Html5中百度地图的点击事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
          2019-01-31
        • Html5页面内使用JSON动画的实现

          这篇文章主要介绍了Html5页面内使用JSON动画的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-01-29
        • canvas学习?#22987;?#20043;绘制简单路径

          这篇文章主要介绍了canvas学习?#22987;?#20043;绘制简单路径,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
          2019-01-28

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>