Canvas 위 챗 보너스 사진 효과 구현

이 글 은 모 과 망 과정 인 에서 유래 한 것 으로 canvas 와 css 3 를 결합 하여 보너스 사진 의 효 과 를 실현 하고 지불 과정 을 하지 않 으 며 2 개의 단 추 를 사용 하여 선명 한 그림 을 표시 하고 동그라미 가 보 이 는 구역 을 리 셋 하 는 것 을 대체 합 니 다.이동 하지 않 은 화면 적응
위 챗 보너스 사진 효과 그림 흐릿 한 그림,물고기 형 동그라미 만 선명 하 게 보 입 니 다.
这里写图片描述

원리 분석:
1.먼저 페이지 에 원본 이미지 한 장 을 놓 고 css 3 filter 로 퍼 지 처리 합 니 다.
2.그림 영역 위 에 그림 이미지 크기 와 같은 canvas 를 배치 하고 선명 한 그림 을 배치 합 니 다.
3.canvas 의 그림 편집 방법 을 통 해 원 구역 을 편집 하면 원 구역 만 표시 하 는 효과 가 있 습 니 다.
코드 및 해석
디 렉 터 리 구조:
> 这里写图片描述

index.html，blur.js，blur.css
index.htm 페이지 코드


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
 <title>      </title>
 <link rel="stylesheet" href="css/blur.css" rel="external nofollow" />
 <script type="text/javascript" src="js/jquery-2.1.0.js"></script> 
 </head>
 <body>
 <div id="blur-div">
 <img id="blur-image" src="img/gd.jpg" />
 <canvas id="canvas"></canvas><!--    js  ，   css  -->
 <a href="javascript:reset()" rel="external nofollow" class="button" id="reset-button">  </a>
 <a href="javascript:show()" rel="external nofollow" class="button" id="show-button">  </a>
 </div>
 <script type="text/javascript" src="js/blur.js"></script>
 </body>
</html>

css 코드 blur.css


*{
 margin:0px;
 padding: 0px;
}

#blur-div{
 width:350px;
 height:220px;
 margin:0 auto;
 position: relative;

 overflow: hidden;
}

.button{
 display: block;
 position: absolute;
 z-index: 200;/*      */

 width: 60px;
 height: 30px;

 color: white;
 text-decoration: none;
 text-align: center;
 line-height: 30px;

 border-radius: 2px;
}
#reset-button{
 left: 40px;
 bottom: 20px; 
 background-color: #058;
}
#reset-button:hover{
 background-color: #047;
}
#show-button{
 right: 40px;
 bottom: 20px; 
 background-color: #085;
}
#show-button:hover{
 background-color: #074;
}
#canvas{

 display:block;
 margin:0 auto;

 position: absolute;
 left:0px;
 top:0px;
 /*canvas image  ，    ，z-index  image,  btn*/
 z-index: 100;
}

#blur-image{
 display:block;
 width:350px;
 height:220px;
 margin:0 auto;

 /*    */
 filter:blur(20px);
 -webkit-filter: blur(20px);
 -moz-filter:blur(20px);
 -ms-filter: blur(20px);
 -o-filter:blur(20px);

 position: absolute;
 left:0px;
 top:0px;

 z-index: 0;
}

canvas 크기 를 image 크기 와 같이 설정 합 니 다.
javascript 코드,방법 은 세 션 으로 나 누 어 설명 합 니 다:
일부 인자 초기 화


var canvasWidth = window.innerWidth; //   div =    ，    
var canvasHeight = window.innerHeight;

var canvas = document.getElementById("canvas");//   canvas    
var context = canvas.getContext("2d");//  2d context

//  canvas      div    
canvas.width = canvasWidth;
canvas.height = canvasHeight;

// canvas      
var image = new Image();
image.src = "img/gd.jpg";

//    
var radius = 30;//        
var clippingRegion;//

바 텀 그림 은 css 3 로 설정 하면 페이지 에 표 시 됩 니 다.흐릿 한 그림 입 니 다.다음 단 계 는 canvas 에 편집 그림 을 그 리 는 것 입 니 다.


image.onload = function(e) {
 //  js    blur-div  canvas    
 $('#blur-div').css("width", canvasWidth + "px");
 $('#blur-div').css("height", canvasHeight + "px");
 $('#blur-image').css("width", image.width + "px");//        ，      
 $('#blur-image').css("height", image.height + "px");

 initCanvas();//     canvas   
}


function initCanvas() {
 //      ，  ,  
 clippingRegion = { //               
 x: Math.random() * (canvas.width - 2 * radius) + radius, 
 y: Math.random() * (canvas.height - 2 * radius) + radius,
 r: radius
 };
 draw(image, clippingRegion);//    image   
}


//      
function setClippingRegion(clippingRegion) {
 context.beginPath(); //    
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //   
 context.clip();
}


function draw(image, clippingRegion) {
 context.clearRect(0, 0, canvas.width, canvas.height);
 context.save();
 //     ，      
 setClippingRegion(clippingRegion);
 context.drawImage(image, 0, 0);

 context.restore();
}

디 스 플레이 버튼 show 를 누 르 면 선명 한 그림 을 완전히 표시 하고 draw 함 수 를 재 활용 하여 편집 영역 을 확대 합 니 다.


function show() {
 //    
 var theAnimation = setInterval(function() {
 clippingRegion.r += 20; //      
 //    
 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //    ，         
  clearInterval(theAnimation);
 }
 draw(image, clippingRegion);//    draw  ，            ，      
 }, 30);//bug，          ，       ，            
}

리 셋 하면 canvas 를 다시 초기 화하 면 됩 니 다.initCanvas 에 서 는 무 작위 위치 가 되 어 있 기 때문에 리 셋 을 누 를 때마다 무 작위 위치 편집 영역 입 니 다.


//  ，initCanvas
function reset() {
 initCanvas();
}

전체 blur.js 코드


var canvasWidth = window.innerWidth; //   div =    ，    
var canvasHeight = window.innerHeight;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//  canvas      div    
canvas.width = canvasWidth;
canvas.height = canvasHeight;

// canvas      
var image = new Image();
var radius = 30;
//    
var clippingRegion;
image.src = "img/gd.jpg";


//          ，   onload  ，              
image.onload = function(e) {
 //blur-div  canvas    
 $('#blur-div').css("width", canvasWidth + "px");
 $('#blur-div').css("height", canvasHeight + "px");

 $('#blur-image').css("width", image.width + "px");
 $('#blur-image').css("height", image.height + "px");

 initCanvas();
}

function initCanvas() {
 //      ，  ,  

 clippingRegion = { //               
 x: Math.random() * (canvas.width - 2 * radius) + radius, //30-320 0-width     30 350-30*2
 y: Math.random() * (canvas.height - 2 * radius) + radius, //30-190 0-height     30 220-30*2
 r: radius
 };
 draw(image, clippingRegion);
}

//      
function setClippingRegion(clippingRegion) {
 context.beginPath(); //    
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //   
 context.clip();
}

function draw(image, clippingRegion) {
 context.clearRect(0, 0, canvas.width, canvas.height);

 context.save();
 //     ，      
 setClippingRegion(clippingRegion);

 context.drawImage(image, 0, 0); //    canvas

 context.restore();
}

//        ，  draw  ，       
function show() {
 //    ,      
 clippingRegion.r=radius;//     
 var theAnimation = setInterval(function() {
 console.log("anima");
 clippingRegion.r += 20; //      
 //    
 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //    ，         1000
  clearInterval(theAnimation);
 }
 draw(image, clippingRegion);
 }, 30);
}

//  ，initCanvas
function reset() {
 initCanvas();
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Jetpack Compose를 사용한 커스텀 컴포저블

첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다. Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Canvas 위 챗 보너스 사진 효과 구현

좋은 웹페이지 즐겨찾기