2. 程式人生 > >使用canvas實現擦玻璃效果

使用canvas實現擦玻璃效果

阿新 • • 發佈：2019-01-18 
<!DOCTYPE html>
<html>
<head lang="zh">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
<meta charset="UTF-8">
<title>HTML5擦玻璃效果 - 何問起</title>
<base target="_blank" />
</head>
<body 
 
style="margin: 0; padding: 0;"> <!-- 圖片需用本地圖片 ，網路圖片無效 -->
<div id="box" style="width: 100%; min-height:480px;" data-image-src="hovertreecity.jpg"></div> 
<div class="hwqewm"><img src="http://hovertree.com/texiao/html5/25/cbl.png" /><br />掃描二維碼在手機檢視。<a href="http://hovertree.com/"
 
>首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/m6ycwicd.htm">原文</a></div>
</body>
</html>
<style>
.clean-window-out {
position: relative;
padding: 0;
}
.clean-window-out .window-image, .clean-window-out .window-canvas 
 
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.clean-window-out .window-canvas {
z-index: 2;
}

a {
color: white;
}
.hwqewm {
width: 200px;
height: 176px;
position: fixed;
z-index: 99999;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px auto;
color: white;
}
</style>
<script src="http://hovertree.com/texiao/html5/25/hovertreegrass.js"></script>
<!-- Greate by HoverTree (Sun Mar 27 02:45:46 CST 2016) 43ms -->

關注微信公眾號 何問起 ，賬號ihewenqi ，或者微信掃描下面二維碼關注。然後傳送"橡皮擦"檢視效果。


參考：使用CSS實現圖片磨砂玻璃效果

相關推薦

使用canvas實現擦玻璃效果

<!DOCTYPE html> <html> <head lang="zh"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,

canvas實現刮圖效果

move 技術 flag blog tex 保留 ast rec 效果 <canvas id="myCanvas" width=300 height=300></canvas> JavaScript代碼: var canvas = doc

canvas實現畫中畫動畫效果--網易娛樂年度盤點H5動畫解密

前言 由於本人最近在做一些 growth hacking 的工作，業務上以後可能也會涉及去做一些能夠在朋友圈火爆分享的 H5 頁面，突然想到去年看到一個網易娛樂年度新聞盤點的 H5 頁面非常的新穎，採用畫中畫的形式依次串聯十多個手繪娛樂圖片，加上洗腦的“好運來”音樂，讓人有很大的分享的慾望。 手機掃碼體驗

使用HTML5中的Canvas實現2D水池效果

var _clientwidth = document.body.clientWidth; var _poolDia = _clientwidth / 2; //水池直徑 var canvas = document.getElementById("pool"); var waterSpaceHeight =

H5使用canvas實現星星閃爍效果

html <!DOCTYPE html> <html>     <head>         <metacharset="utf-8"/>         <title>star</title>

canvas實現粒子塗鴉效果

最近閒來無事，便去研究canvas，因為canvas可以實現很多炫麗的動畫效果，所以就想研究一番，正好看見網上有哥們實現了一個類似的粒子效果，覺得挺不錯的，於是乎自己就動手也寫了一個。好了，話不多說，直接看效果吧。 效果圖 HTML原始碼 &

用css3和canvas實現的蜂窩動畫效果

image() all nim 自己 clas 函數 顯示 var 不兼容 近期工作時研究了一下css3動畫和js動畫。主要是工作中為了增強頁面的趣味性，大家都有意無意的加入了非常多動畫效果。當然大部分都是css3動畫效果。能夠gpu加速，這會降低移動端的性能需求。 今

實現一個塗抹擦除效果

ges sign end cgi alt fix main hal false 塗抹效果還是滿常見的效果。 要做塗抹，首先要存一張中間貼圖作為mask。 然後需要兩個shader，一個做mask一個做混合。 MaskShader: Shader "Unlit/M

canvas實現刮刮卡效果

分享圖片 tlist global site class height fill color overflow canvas實現刮刮卡效果 實現步驟： 設置頁面背景圖，即刮刮卡底部圖片 繪制canvas 刮刮卡頂部圖片drawImage 綁定事件 addEventList

Canvas實現3D效果-可旋轉的立方體

獲得 操作 陰影 換算 http 取出 main TP 變換 摘要：Canvas畫布是一個二維平面，如何展示出3D效果？通過將三維空間中的Z軸抽取出來，將圖像的點投影到與Z軸垂直的平面上，在通過旋轉等變換效果，我們就能實現3D效果。 一、建立坐標系 1）立方體坐標系

canvas 實現波浪線--水波動態效果

效果圖如下： 程式碼如下 import QtQuick 2.6 import QtQuick.Window 2.2 import CanvansItem 1.0 import "./Drawjs.js" as Djs Window { visible: true wi

用canvas實現紅心飄飄的動畫效果

兩週前，專案裡需要實現一個紅心飄飄的點贊效果。抓耳撓腮了老半天，看了幾篇大佬的文章，終於算是摸了個七七八八。不禁長嘆一聲，還是菜啊。先來看一下效果:(傳送門進去點一波) 一、Bezier曲線運動軌跡 其實用大白話描述一下需求就是讓一個紅心圖片沿著貝塞爾曲線的軌跡走，然後邊走邊消失。核心在於得到貝塞爾曲線

【Unity Shader】（九） ------ 高級紋理之渲染紋理及鏡子與玻璃效果的實現

vertex 觀察 cli turn src nor sample tar opaque 筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題。 【Unity Shad

canvas實現玫瑰花效果

<!DOCTYPE HTML> <html> <head> <title>Rose</title> <meta http-equiv="Content-Type" content="text/html; charset=U

轉 原生js canvas實現蘋果電腦mac OS視窗最小化效果

http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458     很多資料 ，前端程式碼，網站程式碼 要錢的也不貴，買點來玩玩

由canvas實現btn效果有感

前言 最近專案上有個工業自動化的需求，做一個按鈕，有按下彈起效果，你肯定會說這不是so easy嗎?是的，沒錯，用css，分分鐘寫一個，不過我們是做的拓撲圖，用的canvas，因此我就想css畫圖也是gpu繪製，css能做的效果，我大canvas理應也能實現，於是我試著用css的實現方式做了一個canvas

使用canvas實現區域性高斯模糊效果

這個功能目的是為了模糊一些人的臉部，一些文字資訊。主要用於使用者手動操作進行模糊。 實現的功能：本人實現了再pc端上面進行拖拽模糊。 實現思路： 首先載入圖片，然後再載入完成的回撥中，建立一個高斯模糊過的圖片畫布。 接著，繫結滑鼠的互動事件，在裡面獲取到在畫布

【Unity Shader】（九） ------ 高階紋理之渲染紋理及鏡子與玻璃效果的實現

一. 渲染紋理 渲染紋理是本文的重點介紹物件。如果你使用過 RenderTexture 來實現一些特殊的效果，那麼你會更能理解本文的內容。 1.1 什麼是渲染紋理 在筆者以前的博文中介紹了許多概念，其中大多提到了 緩衝（buffer）這個名詞 ，在之前我們

原生js+canvas實現下雪效果

/* 控制下雪 */ function snowFall(snow) { /* 可配置屬性 */ snow = snow || {}; this.maxFlake = snow.maxFlake || 200; /* 最多片數 */ this

【HTML5】Canvas 實現放大鏡效果

圖片放大鏡 效果 線上演示    原始碼 原理 首先選擇圖片的一塊區域，然後將這塊區域放大，然後再繪製到原先的圖片上，保證兩塊區域的中心點一致, 如下圖所示: 初始化 <canvas id="canvas" widt