canvas动态绘制旋转图片,canvas rotate()画布的旋转详解
HTML5画布中提供了实现图形平移，旋转，放缩的API .平移(translate)
平移坐标平移(x，y)意思是把(0,0)坐标平移到(x，y)，原来的(0,0)坐标则变成(-x，-y)
图示如下：
任何原来的坐标点p(ox，oy)在翻译之后的坐标点为p(ox-x，oy-y)，其中点(x，y)为平移
点坐标平移(x，y)。
代码演示：复制代码代码如下：
//翻译是将起点移动到centera，然后回到左上角
函数渲染文本(宽度、高度、上下文){
上下文.翻译(宽度/2,高度/2);//中心点坐标为(0, 0)
context.font= 18px Arial
context.fillStyle= blue
context.fillText(请按转义字符退出游戏,5,50);
context.translate(-width/2，-height/2)；//平移恢复(0,0)坐标为左上角
context.fillText(我回到顶端,5,50);
}放缩(Scale)
标度(甲、乙)意思是将对象沿着正常男性染色体组型轴分别放缩至a*x，b*y大小。效果如图示：复制代码代码如下：
//平移矩形。
函数绘制路径（上下文){
context.translate(200，200)；
context.scale(2，2)；//缩放原始形状大小的两倍
context.strokeStyle= green
语境。begin path()；
context.moveTo(0，40)；
context.lineTo(80，40)；
context.lineTo(40，80)；
语境。关闭路径()；
语境。笔画()；
}旋转(rotate)
旋转角度旋转（数学。/8)
旋转前的坐标p(x，y)在对应的旋转后的坐标P(rx，ry)为
rx=x * cos(-角度)-y * sin(-角度);
ry=y * cos(-角度)x * sin(-角度);
旋转90度可以简化为：
rx=y；
ry=-x；
帆布中旋转默认的方向为顺时针方向。演示代码如下：复制代码代码如下：
//新的点。x=x * cos(-角度)-y * sin(-角度),
//新的点。y=y * cos(-角度)x * sin(-角度)
函数渲染旋转文本(上下文){
context.font= 24px Arial
context.fillStyle= red
context.fillText(我在这里！,5,50);
//旋转-90度
//context . rotate(-Math ./2)；
//上下文。填充样式=蓝色；
//context.fillText(我在！, -400,30);
//旋转90度
上下文.旋转(数学。/2);
context.fillStyle= blue
context.fillText(我在这里！,350,-420);
console.log(Math.sin(数学。/2));
//旋转90度，画10条线
context.fillStyle= green
for(var I=0；i4；i ) {
var x=(I ^ 1)* 20；
var y=(I ^ 1)* 60；
var newX=y；
var newY=-x；
context.fillRect(newX，newY，200，6)；
}
}
通常做法是旋转与平移一起使用，先将坐标(0,0)平移到中心位置
平移（宽度/2,高度/2)然后再使用旋转（数学。/2)完成旋转
代码示例如下：复制代码代码如下：
函数savandrestorecontext(上下文){
语境。save()；
context.translate(200，200)；
上下文.旋转(数学。/2);
context.fillStyle= black
context.fillText(2D上下文旋转和平移,10,10);
语境。restore()；
context.fillText(2D上下文旋转和平移,10,10);
}全部JavaScript代码：复制代码代码如下：
var tempContext=null//全局变量2d上下文
window.onload=function() {
var canvas=文档。getelementbyid(“target”)；
画布宽度=450
画布高度=450
如果(!canvas.getContext) {
不支持console.log(Canvas .请安装一个HTML5兼容的浏览器。);
返回；
}
//获取画布的2D上下文并绘制图像
临时上下文=画布。获取上下文(“2d”)；
//renderText(canvas.width，canvas.height，temp context)；
savandrestorecontext(临时上下文)；
//绘制路径(临时上下文)；
}
//翻译是将起点移动到centera，然后回到左上角
函数渲染文本(宽度、高度、上下文){
上下文.翻译(宽度/2,高度/2);
context.font= 18px Arial
context.fillStyle= blue
context.fillText(请按转义字符退出游戏,5,50);
context.translate(-width/2，-height/2)；
context.fillText(我回到顶端,5,50);
}
//平移矩形。
函数绘制路径（上下文){
context.translate(200，200)；
context.scale(2，2)；//缩放原始形状大小的两倍
context.strokeStyle= green
语境。begin path()；
context.moveTo(0，40)；
context.lineTo(80，40)；
context.lineTo(40，80)；
语境。关闭路径()；
语境。笔画()；
}
//新的点。x=x * cos(-角度)-y * sin(-角度),
//新的点。y=y * cos(-角度)x * sin(-角度)
函数渲染旋转文本(上下文){
context.font= 24px Arial
context.fillStyle= red
context.fillText(我在这里！,5,50);
//旋转-90度
//context . rotate(-Math ./2)；
//上下文。填充样式=蓝色；
//context.fillText(我在！, -400,30);
//旋转90度
上下文.旋转(数学。/2);
context.fillStyle= blue
context.fillText(我在这里！, 350,-420);
console.log(Math.sin(数学。/2));
//旋转90度，画10条线
context.fillStyle= green
for(var I=0；i4；i ) {
var x=(I ^ 1)* 20；
var y=(I ^ 1)* 60；
var newX=y；
var newY=-x；
context.fillRect(newX，newY，200，6)；
}
}
函数savandrestorecontext(上下文){
语境。save()；
context.translate(200，200)；
上下文.旋转(数学。/2);
context.fillStyle= black
context.fillText(2D上下文旋转和平移,10,10);
语境。restore()；
context.fillText(2D上下文旋转和平移,10,10);
}
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。