解canvas离屏缓存

最新推荐文章于 2024-04-27 22:23:55 发布

weixin_33815613

最新推荐文章于 2024-04-27 22:23:55 发布

阅读量833

点赞数

文章标签：游戏

原文链接：https://juejin.im/post/5cc5794e5188256fa32fc033

版权

临近下班来一发，让你在地铁上就能理解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

weixin_33815613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解canvas离屏缓存

临近下班来一发，让你在地铁上就能理解canvas离屏缓存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
复制链接

扫一扫