Canvas creates vulgar advertisements in QQ space

In Qzone, we can often see the advertisement of a certain state college recently, when you slide down, there will be a round mask, and it will be bigger or smaller with the slide of your finger.

Rely on technology

The main implementation here is to make use of 2D drawing capability of Canvas, and the functions and principles of drawImage and Clip APIS will be mainly explained.

The effect

The implementation process

1. Preparation of canvas drawing

   There are many basic canvas tutorials on the Internet, so I won’t explain them here. Ctrl + c Ctrl + v directly

   <div class="view" id="bb"<canvas id= <canvas id="canvas" ></canvas>
   </div>Copy the code

   The background layer is displayed using CSS, because the background layer does not need to be redrawn, so it is displayed using CSS to reduce the canvas rendering call.

2. Initialize our canvas

   var canvas = document.getElementById("cas"), 
   ctx = canvas.getContext("2d"); canvas.width = 800; // Set canvas width to canvas. Height = 600; // Set the canvas heightCopy the code

   If you want to use PX as a unit of width and height, you need to adjust the setting method. canvas.style.width=600+’px’

3. Set the mask layer

   ​

       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 (enclosing MSK, 0, 0). ctx.restore(); }; Circle.prototype.big =function() {// mask gets bigger every time r++ this.r++; this.render(this.ctx); }; Circle.prototype.small =function() {// Mask becomes smaller each time r--if(this.r>0){
               this.r--;
           }else{
   ​
           }
           this.render(this.ctx);
           
       };Copy the code

   Here I define a class for a circular mask layer and give it methods to render and make it bigger/smaller. The main logic here is as follows.

   ctx.beginPath(); ctx.arc(this.x,this.y,this.r,0,Math.PI*2); ctx.closePath(); // Close the circular path selection area ctx.clip(); DrawImage (this.msk,0,0); // Draw the mask layerCopy the code

   The clip is used as a clipping tool in the Canvas to generate and select the previously drawn path area and use the subsequent layer as a mask layer for clipping.

   In the above code, I used the two small items save and restore, which I believe can be seen in many canvas development. Baidu can also know that they are the drawing environment and restore for storing the canvas context. So why do we use them even in the same drawing situation? This involves the drawing principle of canvas, which will be specifically explained in the future without too much introduction here.

4. The root of all evil

   ​

   When our mask layer is loaded, everything will be up and running.

   var cir;
   const img=new Image();
   img.src='pic2.jpg';
   img.onload=function(){
   canvas.addEventListener('click'.function(e) {/ / convert the click of the mouse coordinates, coordinates into canvas coordinates 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() {// Make cir.big(); requestAnimFrame(scal); } window.requestAnimFrame = (function() {return  window.requestAnimationFrame       ||
   ​
                window.webkitRequestAnimationFrame ||
   ​
                window.mozRequestAnimationFrame    ||
   ​
                function( callback ){ window.setTimeout(callback, 1000 / 60); }; }) ();Copy the code

Open pit instructions

The related technical tutorials of Canvas and SVG will be updated from time to time. There will be practical ones, master principles ones, 2D 2.5D 3D ones, and linear algebra, physical graphics and other related basic knowledge will be involved. I will try my best to do this series well.

Welcome all guests to pay attention to coins!!

This source: https://github.com/dxiaoqi/canvas-svg-/tree/master/canvas/clip%E6%95%88%E6%9E%9C