canvas 之旋转画布

来源：互联网发布：淘宝盗图扣分年底清零编辑：程序博客网时间：2024/05/16 02:00

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>

以上代码仅供参考。

阅读全文

0 0