холст создает вульгарную рекламу в пространстве QQ

внешний интерфейс SVG CSS Canvas

В пространстве QQ мы часто можем видеть рекламу определенного государственного колледжа в последнее время.Когда вы проводите вниз, появляется круглая маска, и она становится больше или меньше при движении пальца.

технологически зависимый

Основная реализация здесь заключается в использовании возможностей 2D-рисования холста, и в основном объясняются функции и принципы двух API, drawImage и clip.

Эффект


Процесс реализации

  1. Подготовка к рисованию холста.

    В Интернете есть много базовых руководств по холсту, поэтому я не буду здесь слишком много объяснять. непосредственныйCtrl+c Ctrl+v

    <div class="view" id="bb">//用来做背景层的显示
    <canvas id="canvas" ></canvas>
</div>

    Фоновый слой отображается с помощью css.Поскольку фоновый слой не нужно перерисовывать, он отображается с использованием css, чтобы уменьшить вызов рендеринга холста.

  2. Инициализируем наш холст

    var canvas = document.getElementById("cas"), 
ctx = canvas.getContext("2d");
canvas.width = 800;//设置画布的宽
canvas.height = 600;//设置画布的高

    ​ Вот его кто-то привычно будет использовать при настройке холстаpxВ качестве единицы ширины и высоты, а затем обнаружил, что эффект пукания исчез, если вы хотите использоватьpxКак единое целое, вам нужно настроить метод настройки ширины и высоты.canvas.style.width=600+'px'

  3. Настройте слой-маску

    ​

        function Circle(x,y,r,msk=new Image()) {
        this.x=x;   
        this.y=y;
        this.r=r;
        this.ctx={};
        this.msk=msk;
    }
    Circle.prototype.render = function(cxt) {
        this.ctx=ctx;
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
        ctx.closePath();
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.clip();
        ctx.drawImage(this.msk,0,0);
        ctx.restore();
        
    };
    Circle.prototype.big = function() {
        //蒙版变大，每次r++
        this.r++;
        this.render(this.ctx);
    };
    Circle.prototype.small = function() {
        //蒙版变小，每次r--
        if(this.r>0){
            this.r--;
        }else{
​
        }
        this.render(this.ctx);
        
    };

    Здесь я определяю класс для кругового слоя маски и даю ему методы рендеринга и увеличения/уменьшения.Основная логика здесь следующая.

        ctx.beginPath();
    ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
    ctx.closePath();
    //闭合圆形路径选取区
    ctx.clip();
    //生成剪裁选取
    ctx.drawImage(this.msk,0,0);
    //将蒙版层进行绘制

    ​clipОн используется как небольшой инструмент для отсечения на холсте, который может генерировать выделение из ранее нарисованной области контура и использовать последующий слой в качестве маскирующего слоя для отсечения.

    В приведенном выше коде я использовалsaveа такжеrestoreЭти две мелочи, я считаю, что во многих холстех развитие Baidu также может знать, что для хранения окружающей среды рисования и восстановления, то почему мы их используем, даже если мы сделаем это? Это включает в себя проблему принципа рисования холста. Здесь не более вводится и будет объяснено отдельно.

  4. Корень всех зол

    ​

    Когда наш слой маски загрузится, все запустится.

    var cir;
const img=new Image();
img.src='pic2.jpg';
img.onload=function(){
canvas.addEventListener('click',function(e){
    //将鼠标的点击坐标坐标转换成canvas坐标
    var x= e.x-canvas.getBoundingClientRect().left;
    var y= e.y-canvas.getBoundingClientRect().top;
    //生成蒙版  渲染蒙版
    cir= new Circle(x,y,200,img);
    cir.render(ctx);
    //开始动起来
    requestAnimFrame(scal);
})
}
​
function scal() {
    //变大吧 萌版
    cir.big();
    requestAnimFrame(scal);
}
​
   window.requestAnimFrame = (function(){
​
     return  window.requestAnimationFrame       ||
​
             window.webkitRequestAnimationFrame ||
​
             window.mozRequestAnimationFrame    ||
​
             function( callback ){
​
               window.setTimeout(callback, 1000 / 60);
​
             };
​
   })();
​

Инструкция по вскрытию ямы

Время от времени обновляйте технические руководства, связанные с холстом и svg, включая фактический тип боя и тип основного принципа, включая 2d, 2.5d и 3d, а также включают базовые знания линейной алгебры, физики, графики и т. д. Я буду стараться изо всех сил, чтобы сделать эту серию хорошо.

Пожалуйста, собирайте и обратите внимание, и подарите монету! ! ! 

Исходный код здесь: https://github.com/dxiaoqi/canvas-svg-/tree/master/canvas/clip%E6%95%88%E6%9E%9C


Категории