canvas 雾窗与雪花

最新推荐文章于 2021-06-03 09:12:49 发布

tianxing0923

最新推荐文章于 2021-06-03 09:12:49 发布

阅读量1.8k

点赞数

分类专栏： Web js 文章标签： Canvas

本文链接：https://blog.csdn.net/tianxing0923/article/details/9225977

版权

前段时间看了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

最低0.47元/天解锁文章

tianxing0923

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
canvas 雾窗与雪花

前段时间看了canvas方面的一些技术，故来试试。效果类似于外面下雪，玻璃窗户起雾，鼠标可以当刷子来清除玻璃上的雾气。 fog and snow html,body{margin: 0px; padding: 0px; background: url(http://qlogo3.store.qq.com/qzone/466799106/46679
复制链接

扫一扫