前段时间看了canvas方面的一些技术,故来试试。效果类似于外面下雪,玻璃窗户起雾,鼠标可以当刷子来清除玻璃上的雾气。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fog and snow</title>
<style>
html,body{margin: 0px; padding: 0px; background: url(http://qlogo3.store.qq.com/qzone/466799106/466799106/100); height: 100%;}
#snowWrap, #canvasWrap{position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 100; overflow: hidden;}
#snowWrap div{color: #fff; position: absolute; -moz-user-select: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: none;}
#canvasWrap{z-index: 50;}
#fog{cursor: url(http://findicons.com/files/icons/2652/gentleface/48/brush_icon.png) 10 40, auto;}
</style>
</head>
<body>
<div id="snowWrap"></div>
<div id="canvasWrap">
<canvas id="fog"></canvas>
</div>
<script>
var Draw = (function () {
function Draw(ctx) {
this.ctx = ctx || document.getElementById('fog').getContext('2d');
};
Draw.prototype.dStart = function (pageX