当前位置：首页 > 网页特效 > canvas

支持移动手机的HTML5 Canvas刮刮卡特效

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
使用figure元素来制作刮卡。

```html
<figure id="bridgeContainer">
  <canvas id="bridge" width="750" height="465"></canvas>
  <figcaption>......</figcaption>
</figure>  
```                 
#####  CSS样式
为刮卡设置基本的CSS样式，将canvas元素的背景设置为初始背景图片。

```html
#bridge {
  display: block;
  margin: 0 auto;
  background-image: url("../img/scratch-2.jpg");
  background-image: -webkit-image-set(url("../img/scratch-2.jpg") 1x, url("../img/scratch-2x.jpg") 2x);
  background-size: cover;
  width: 100%;
  max-width: 750px;
  height: auto;
  cursor: crosshair;
  cursor: url(../img/circular-cursor.png) 53 53, crosshair;
}
 
#bridgeContainer {
  text-align: center;
  font-family: Avenir, sans-serif;
}
 
#bridgeContainer figcaption {
  margin-top: 2rem;
}               
```   
#####  JavaScript
通过下面的js代码来实现在canvas中绘制刮卡效果。

```html
var bridge = document.getElementById("bridge"),
bridgeCanvas = bridge.getContext('2d'),
brushRadius = (bridge.width / 100) * 5,
img = new Image();
 
if (brushRadius < 50) { brushRadius = 50 }
 
img.onload = function(){  
  bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
}
img.loc = 'img/';
img.filename = 'scratch-1.jpg';
if (window.devicePixelRatio >= 2) {
  var nameParts = img.filename.split('.');
  img.src = img.loc + nameParts[0]+"-2x"+"."+nameParts[1];
} else {
  img.src = img.loc + img.filename;
}
 
function detectLeftButton(event) {
    if ('buttons' in event) {
        return event.buttons === 1;
    } else if ('which' in event) {
        return event.which === 1;
    } else {
        return event.button === 1;
    }
}
 
function getBrushPos(xRef, yRef) {
  var bridgeRect = bridge.getBoundingClientRect();
    return {
    x: Math.floor((xRef-bridgeRect.left)/(bridgeRect.right-bridgeRect.left)*bridge.width),
    y: Math.floor((yRef-bridgeRect.top)/(bridgeRect.bottom-bridgeRect.top)*bridge.height)
    };
}
       
function drawDot(mouseX,mouseY){
  bridgeCanvas.beginPath();
    bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2*Math.PI, true);
    bridgeCanvas.fillStyle = '#000';
    bridgeCanvas.globalCompositeOperation = "destination-out";
    bridgeCanvas.fill();
}
 
bridge.addEventListener("mousemove", function(e) {
  var brushPos = getBrushPos(e.clientX, e.clientY);
  var leftBut = detectLeftButton(e);
  if (leftBut == 1) {
    drawDot(brushPos.x, brushPos.y);
  }
}, false);
 
bridge.addEventListener("touchmove", function(e) {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) {
    var brushPos = getBrushPos(touch.pageX, touch.pageY);
        drawDot(brushPos.x, brushPos.y);
    }
}, false);
```

web299.com

支持移动手机的HTML5 Canvas刮刮卡特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果