canvas打造QQ空间低俗广告

时间 2019-12-04

标签 canvas 打造空间低俗广告栏目腾讯繁體版

原文原文链接

在QQ空间中，咱们最近常常能够看到某州学院的广告，当你滑下去时，会有一个圆形蒙版出现，而且会随着手指的滑动而变大或者变小。css

依赖技术

这里的主要实现是利用canvas的2D绘图能力，会主要讲解drawImage与clip两个API的做用与原理。git

效果

实现过程

canvas绘制的准备github
在网上有不少的canvas的基础教程，这里不作过多讲解。直接Ctrl+c Ctrl+vweb
```
<div class="view" id="bb">//用来作背景层的显示
    <canvas id="canvas" ></canvas>
</div>复制代码
```
背景的图层显示使用css显示，由于背景层不须要重绘，因此使用css来显示，减小canvas的渲染调用。canvas
初始化咱们的画布bash
```
var canvas = document.getElementById("cas"), 
ctx = canvas.getContext("2d");
canvas.width = 800;//设置画布的宽
canvas.height = 600;//设置画布的高复制代码
```
在这里有人在设置画布的时候会习惯性使用px来做为宽高的单位，而后发现屁效果都没了，若是想使用px做为单位，则须要对宽高的设置方法进行调整。canvas.style.width=600+'px'svg

设置蒙版层工具

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);
        
    };复制代码

这里我定义了一个圆形蒙版层的类，而且给了它渲染以及变大/小的方法，这里的主要逻辑是以下。ui

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在canvas是里用做剪裁的小工具，能够将以前绘制的路径区生成选取，而且将后来的图层看成蒙版层来作剪裁。this

在以上的代码中，我使用了save与restore这两个小东西，相信在不少canvas的开发中都会见到，百度也能知道是为了存储画布上下文的绘制环境与还原，那么为何咱们即便相同的绘制状况下也要使用它们呢。这涉及到canvas的绘制原理问题，这里不作过多介绍，后面会专门讲解。

万恶之源

当咱们的蒙版层加载完毕后，一切都将开始运行。

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);

             };

   })();
复制代码

开坑说明

不按期更新canvas与svg的相关技术教程，有实战型，也会有主原理型的，2d 2.5d 3d都会包含到，同时涉及的有线性代数物理图形学等相关的基础知识。我会尽力把这一系列内容作好。

欢迎诸位客官收藏关注打赏投硬币！！！

本处源码:https://github.com/dxiaoqi/canvas-svg-/tree/master/canvas/clip%E6%95%88%E6%9E%9C