解canvas离屏缓存

临近下班来一发,让你在地铁上就能理解canvas离屏缓存

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <p>
        F12,ctrl+shift+p搜索FPS,打开fps显示数值
    </p>
    <canvas id='canvas' width="800" height="600">浏览器不支持canvas</canvas>
</body>
<script>
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext('2d')
    var isCache = true  //是否开启离线缓存,改为false试试?

    var borderWidth = 2
    var Balls = []
    var Ball = function (x, y, vx, vy, useCache) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.r = getZ(getRandom(20, 40));
        this.color = [];
        //为了体现性能专门繁琐的画圈圈
        var num = getZ(this.r / borderWidth);
        for (var j = 0; j < num; j++) {
            this.color.push("rgba(" + getZ(getRandom(0, 255)) + "," + getZ(getRandom(0, 255)) + "," + getZ(getRandom(0, 255)) + ",1)");
        }

        //核心代码
        this.cacheCanvas = document.createElement("canvas");
        this.cacheCtx = this.cacheCanvas.getContext("2d");
        this.cacheCanvas.width = 2 * this.r;
        this.cacheCanvas.height = 2 * this.r;
        // document.body.appendChild(this.cacheCanvas)
        this.useCache = useCache;
        if (useCache) {
            this.cache();
        }
    }
    Ball.prototype = {
        paint: function (ctx) {
            if (!this.useCache) {
                ctx.save();
                var j = 0;
                ctx.lineWidth = borderWidth;
                for (var i = 1; i < this.r; i += borderWidth) {
                    ctx.beginPath();
                    ctx.strokeStyle = this.color[j];
                    ctx.arc(this.x, this.y, i, 0, 2 * Math.PI);
                    ctx.stroke();
                    j++;
                }
                ctx.restore();
            } else {
                ctx.drawImage(this.cacheCanvas, this.x - this.r, this.y - this.r);
            }
        },
        cache: function () {
            ctx.save();
            var j = 0;
            this.cacheCtx.lineWidth = borderWidth;
            for (var i = 1; i < this.r; i += borderWidth) {
                this.cacheCtx.beginPath();
                this.cacheCtx.strokeStyle = this.color[j];
                this.cacheCtx.arc(this.r, this.r, i, 0, 2 * Math.PI);
                this.cacheCtx.stroke();
                j++;
            }
            ctx.restore();
        },
        move: function () {
            this.paint(ctx);
            this.x += this.vx;
            this.y += this.vy;
            if (this.x > (canvas.width - this.r) || this.x < this.r) {
                this.x = this.x < this.r ? this.r : (canvas.width - this.r);
                this.vx = -this.vx;
            }
            if (this.y > (canvas.height - this.r) || this.y < this.r) {
                this.y = this.y < this.r ? this.r : (canvas.height - this.r);
                this.vy = -this.vy;
            }
        }
    }
    function init() {
        Balls.length = 0
        for (var i = 0; i < 50; i++) {
            var ball = new Ball(getRandom(0, canvas.width), getRandom(0, canvas.height), getRandom(-5, 5), getRandom(-5, 5), isCache)
            Balls.push(ball);
        }
        update();
    }
    function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < Balls.length; i++) {
            Balls[i].move();
        }
        requestAnimationFrame(update)
    }
    function getZ(num) {
        //返回整数对性能有优化
        return ~~num;
    }
    function getRandom(a, b) {
        return Math.random() * (b - a) + a;
    }
    init()
</script>

</html>
复制代码

转载于:https://juejin.im/post/5cc5794e5188256fa32fc033

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值