图片/图形

Canvas 擦抹模糊玻璃特效

阿里云


这是一款 HTML5 canvas 擦抹模糊玻璃特效。该特效类似橡皮擦特效,当鼠标在屏幕上涂抹时,原本模糊的地方会变成清晰的图片。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  2. <link rel="stylesheet" href="css/style.css">
  3. <script src="js/jquery.min.js" type="text/javascript"></script>

HTML 结构

  1. <div class="canvas-bg-image">
  2.   <div></div>
  3. </div>

JavaScript

  1. // defining variables
  2. // c and h are canvases, f and b are contexts
  3. let c, h, f, b, img, mouseX = null,
  4.     mouseY = null,
  5.     array = [],
  6.     startTime = 0,
  7.     over500msElapsed = true
  8.  
  9. $("body").mousemove((e) => {
  10.   mouseX = e.clientX
  11.   mouseY = e.clientY
  12.   startTime = Date.now()
  13.   over500msElapsed || onImageLoad()
  14. })
  15.  
  16. // handle mouse leaving window (set null) or resize (rebuild canvases)
  17. $(window)
  18.   .on("blur mouseout", function() {
  19.   mouseX = mouseY = null
  20. }).on("resize", function() {
  21.   c && c.parentNode && c.parentNode.removeChild(c)
  22.   setUpCanvases()
  23. })
  24.  
  25. setUpCanvases()
  26.  
  27. function setUpCanvases() {
  28.   const bodyWidth = $("body").width()
  29.   const bodyHeight = $("body").height()
  30.   c = document.createElement("canvas")
  31.   c.width = bodyWidth
  32.   c.height = bodyHeight
  33.   c.style.position = "absolute"
  34.   c.style.top = 0
  35.   c.style.left = 0
  36.   $("body").append(c)
  37.   h = document.createElement("canvas")
  38.   h.width = bodyWidth
  39.   h.height = bodyHeight
  40.   // set up contexts
  41.   if (c.getContext && c.getContext("2d") && (f = c.getContext("2d"),
  42.                                              b = h.getContext("2d"), b.lineCap = "round", b.shadowColor = "#000", !img)) {
  43.     // loads image (never added to DOM) so that it can be added to canvas (browser only needs to download it once)
  44.     img = new Image
  45.     // add listener before setting source so it will definitely capture the event
  46.     $(img).one("load", onImageLoad)
  47.     $(img).attr("src", "https://static.canva.com/static/images/bg_tiles_color.2.jpg")
  48.   }
  49. }
  50.  
  51. function onImageLoad() {
  52.   let currentTime = Date.now()
  53.   over500msElapsed = currentTime > startTime + 500 ? false : true
  54.  
  55.   // push to start of array
  56.   mouseX && over500msElapsed && array.unshift({
  57.     time: currentTime,
  58.     x: mouseX,
  59.     y: mouseY + $("body").scrollTop()
  60.   })
  61.  
  62.   // trims array - removes all items older than 1s
  63.   for (let i = 0; i < array.length; i++) {
  64.     if (currentTime - array[i].time > 1000) {
  65.       array.length = i
  66.     }
  67.   }
  68.  
  69.   if (array.length > 0) {
  70.     requestAnimationFrame(onImageLoad)
  71.   }
  72.  
  73.   // clear canvas2 by its own width and height
  74.   b.clearRect(0, 0, h.width, h.height)
  75.  
  76.   // loop through each item in array
  77.   for (i = 1; i < array.length; i++) {
  78.     const thisItem = array[i]
  79.     const lastItem = array[i - 1]
  80.  
  81.     // fading stroke over time
  82.     const lineOpacity = Math.max(1 - (currentTime - thisItem.time) / 1000, 0)
  83.     b.strokeStyle = `rgba(0,0,0,${lineOpacity})`
  84.     b.lineWidth = 80
  85.     b.beginPath()
  86.     b.moveTo(lastItem.x, lastItem.y)
  87.     b.lineTo(thisItem.x, thisItem.y)
  88.     b.stroke()
  89.   }
  90.  
  91.   // adjusting for canvas ratio
  92.   let imageRatio1 = c.width
  93.   let imageRatio2 = c.width / img.naturalWidth *
  94.     img.naturalHeight
  95.   imageRatio2 < c.height && (imageRatio2 = c.height, imageRatio1 = c.height / img.naturalHeight * img.naturalWidth)
  96.  
  97.   // drawing the images
  98.   // draw image onto f
  99.   f.drawImage(img, 0, 0, imageRatio1, imageRatio2)
  100.   // set "destination-in" temporarily: when f and h overlap, f is kept (h acts as a mask for the image)
  101.   f.globalCompositeOperation = "destination-in"
  102.   // add h as mask
  103.   f.drawImage(h, 0, 0)
  104.   // reset to normal composite operation
  105.   f.globalCompositeOperation = "source-over"
  106. }

Codepen 网址:https://codepen.io/samwooly/pen/qpeaNL

Canvas 擦抹模糊玻璃特效

已有 400 人购买
  • r3od
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!