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>
以上代码仅供参考。