javascript - HTML5 Canvas 旋转功能
问题描述
function drawNumbers(){
var rad, num;
cx.font= "30px Arial";
cx.textAlign = "center";
cx.textBaseline = "middle";
//numbers around the inner circumference
for(num=1; num < 13; num++){
rad = num * Math.PI/6; //angle for every number
cx.rotate(rad);
cx.translate(0, -175);
cx.rotate(-rad);
cx.fillText(num.toString(),0,0);
cx.rotate(rad);
cx.translate(0, 175);
cx.rotate(-rad);
}
}
function drawHands(){
//getting the time
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
//setting the radians based on the time
//hour hand
hours %= 12;
hours = (hours * Math.PI/6) + (minutes * Math.PI/360) + (seconds * Math.PI/21600);
hands(hours, radius * 0.04, radius * 0.5);
//minute hand
minutes = (minutes * Math.PI/30) + (seconds * Math.PI/1800);
hands(minutes, radius * 0.03, radius * 0.65);
//second hand
seconds = (seconds * Math.PI/30);
hands(seconds, radius * 0.01, radius * 0.68);
}
function hands(ang, width, length){
cx.beginPath();
cx.lineWidth = width;
cx.lineJoin = "round";
cx.lineCap = "round";
cx.moveTo(0, 0);
cx.rotate(ang);
cx.lineTo(0, -length);
cx.stroke();
cx.rotate(-ang);
}
我在 W3Schools 中学习 HTML5 画布,教程教授如何制作工作时钟。1. 我只是不明白额外的旋转在函数中是如何工作的。2. 应用旋转功能时,是否总是从画布的原点(0, 0) 开始旋转?
解决方案
当您调用该rotate
函数时,它会旋转整个画布,想象一下拿着一幅画然后倾斜它。它总是发生在原点附近。围绕不同点旋转的方法是先旋转translate
整个画布,然后旋转rotate
它。
回到绘画的类比,如果我们旋转了我们的绘画,一旦我们画好了我们的线条,我们就需要将绘画恢复到直立状态。因此我们rotate(-ang)
。如果我们进行了翻译,我们也必须以类似的方式撤销我们的翻译。
旋转以及我们为何撤消旋转
在下面的代码中,您可以看到我正在绘制一个基本黑色矩形,然后调用一个函数将画布旋转 0.5 弧度并绘制另一个矩形两次。我还没有撤消我的旋转,所以第三个矩形实际上以 1 弧度旋转。
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
function drawRotatedRectangle() {
ctx.rotate(0.5);
ctx.fillRect(0, 0, 60, 50);
}
// Draw base rectangle
ctx.fillRect(0, 0, 60, 50);
// Rotate and draw second rectangle
ctx.fillStyle = "#FF0000";
drawRotatedRectangle();
// rotate and draw third rectangle
ctx.fillStyle = "#00FF00";
drawRotatedRectangle();
<canvas id="canvas"></canvas>
为了解决这个问题,我们修改了drawRotatedRectangle()
函数以撤消它所做的所有平移和旋转:
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
function drawRotatedRectangle() {
ctx.rotate(0.5);
ctx.fillRect(0, 0, 60, 50);
ctx.rotate(-0.5);
}
// Draw base rectangle
ctx.fillRect(0, 0, 60, 50);
// Rotate and draw second rectangle
ctx.fillStyle = "#FF0000";
drawRotatedRectangle();
// rotate and draw third rectangle
ctx.fillStyle = "#00FF00";
drawRotatedRectangle();
<canvas id="canvas"></canvas>
现在我们看到红色(隐藏)矩形和绿色矩形处于相同的角度。
围绕不同点旋转到原点
为了演示如何围绕不同的位置旋转到原点,我们可以首先翻译上下文原点的位置,然后旋转画布。下面我将原点移动到基本矩形的中心,旋转画布并在基本矩形的顶部绘制一个旋转的矩形。再次按照最近应用的顺序恢复平移和旋转。
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
function drawRotatedRectangle() {
// Move origin to center of rectangle
ctx.translate(30, 25);
// Rotate 0.5 radians
ctx.rotate(0.5);
// Draw rectangle where the center of the rectangle is the origin
ctx.fillRect(-30, -25, 60, 50);
// Undo our rotate
ctx.rotate(-0.5);
// Undo our translate
ctx.translate(-30, -25);
}
// Draw base rectangle
ctx.fillRect(0, 0, 60, 50);
// Rotate and draw second rectangle
ctx.fillStyle = "#FF0000";
drawRotatedRectangle();
// rotate and draw third rectangle
ctx.fillStyle = "#00FF00";
drawRotatedRectangle();
<canvas id="canvas"></canvas>
编辑 - 处理舍入错误
正如 Kaiido 在评论中提到的那样,该rotate(a)
函数将对给定的输入进行四舍五入,因此简单地执行反向rotate(-a)
函数不会将您返回到原始转换。
他们建议的解决方案是将变换矩阵设置为所需的位置setTransform()
,在这些示例中,我们只返回到画布的原始变换,因此我们可以使用单位矩阵:
ctx.setTransform(1,0,0,1,0,0)
或者,您也可以使用save()
和restore()
方法。这些将类似于将画布上下文的当前状态推送到堆栈,当您restore()
从堆栈中弹出最新状态时,您将返回到先前的转换。Jakob Jenkov 的这篇文章通过一些示例进一步解释了这种方法。
推荐阅读
- javascript - Vue.js 文本输入不显示 v-model 的值
- .net - id_token/Identity token 声明隐式与任何其他流之间的差异
- python - 为什么 Django FieldFIle readline() 返回文本文件的十六进制版本?
- flutter - 在 Flutter 中使用 Stack 和 Flexible Positioner 进行布局?
- list - SwiftUI:NavigationView 中列表的导航标题卡在适当的位置(滚动动画损坏)
- python - Python Selenium 查找独占对象属性
- android - Firebase 崩溃,没有线索
- qt - 尽管没有虚函数,但未定义对类的 vtable 引用
- android - ViewModelFactory 无法正确实例化 ViewModel
- google-calendar-api - 多个 Google 日历到 Google 表格的两种方式同步问题