canvas 之旋转画布

最新推荐文章于 2024-04-16 16:33:00 发布

洋葱头的博客

最新推荐文章于 2024-04-16 16:33:00 发布

阅读量1.1k

点赞数

分类专栏： canvas 文章标签： d3 canvas

本文链接：https://blog.csdn.net/github_37829766/article/details/74010694

版权

canvas 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

canvas 之旋转画布

准备工作

需要插件
1、jquery-1.11.1.min.js 下载官网：http://jquery.com/
2、d3.js  下载官网：https://d3js.org/

代码

下面以分辨率为1920 * 1080为例
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="d3.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
<canvas id="canvas" style="height:1080px;width: 1920px" ></canvas>
<script type="text/javascript">
    var _img = new Image();
    _img.src = 'demo.png';

    function _drawBG() {
        // 获取屏幕的宽度和高度
        var window_width = screen.width;
        var window_height = screen.height;

        // 生成画布
        var canvas_bg = document.getElementById('canvas');
        var context_bg = canvas_bg.getContext('2d');

        canvas_bg.width = window_width;
        canvas_bg.height = window_height;

        // 图片的大小及中心坐标
        var img_width = 6000;
        var img_height = 6000;
        var a = img_width / 2;
        var b = img_height / 2;

        _img.onload = function(){
            // 图片初始位置偏移量计算
            context_bg.translate((window_width / 2) - a, (window_height / 2) - b);
            // 计算圆半径
            var r = Math.sqrt(a * a + b * b);
            // 每秒旋转的圆心角角度
            var angle = 0.1;
            // 定时触发图片旋转
            d3.timer(function(){
                // 圆上每个点的坐标
                var x = a - Math.cos(2 * Math.PI / 360 * angle + Math.acos(a / r)) * r;
                var y = b - Math.sin(2 * Math.PI / 360 * angle + Math.asin(b / r)) * r;
                context_bg.translate(x, y);
                context_bg.rotate(2 * Math.PI / 360 * angle);
                context_bg.drawImage(_img, 0, 0, img_width, img_height);
            });

        };
    }
    _drawBG();
</script>
</body>
</html>