html将整个画布旋转90度
html rotate entire canvas by 90 degrees
我有一个绘制到html cavas的图像。我希望能够将图像旋转90度,但我似乎找不到关于如何旋转整个画布图像的示例,只旋转画布上的一个对象。
有人有将整个画布旋转90度的示例代码吗?
我接受了下面的anwser,但希望提供额外的示例代码:http://jsfiddle.net/VTyNF/1/
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.translate(canvas.width/2,canvas.height/2)
context.rotate(90 * (Math.PI / 180));
context.beginPath();
context.rect(188 - canvas.width/2, 50 - canvas.height/2, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
在绘制画布之前,必须应用此旋转。不能旋转已绘制的任何对象。
因此:
若要旋转画布,content.rotate()
需要一个以弧度为单位的值。因此,首先,让我们通过使用将度数转换为弧度来简化它
function getRadianAngle(degreeValue) {
return degreeValue * Math.PI / 180;
}
您可能希望在旋转之前先平移画布,以便正确设置其原点。
context.translate(context.width/2,context.height/2);
一旦我们知道我们想要什么值,我们只需在绘制任何东西之前旋转画布!
请注意,在您的示例中,您绘制的矩形也在context.rect(
X,Y,W,H)`的前两个参数中偏移。
我发现将宽度设置为变量更容易,然后做简单的数学运算来自动重新定位盒子,注意到现在它完美地位于中心,并且旋转得很好!
演示:http://jsfiddle.net/shannonhochkins/VTyNF/6/
假设您的canvas
元素具有id
"foo"。在JavaScript中,你可以做这样的事情:
var canvas = document.getElementById('foo'),
context = canvas.getContext('2d');
// Rotates the canvas 90 degrees
context.rotate(90 * (Math.PI / 180));
您能使用CSS将<canvas>
元素与transform: rotate(90deg);
一起旋转吗?
您可以通过操纵像素数据轻松地将图像旋转90度。如果你的画布不是正方形的,你将不得不选择什么是"正确"的答案
使用getImageData
函数检索像素,以常规方式对其进行操作,并使用putImageData
显示结果。
此版本不需要90度转弯的中心点:(对于新手来说并不容易,因为它是一个1d阵列,每个像素有4个值。
//...
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d', {willReadFrequently: true});
const img = document.createElement('img');
const file = inp.files[0]; // file from user input
img.src = URL.createObjectURL(file);
img.addEventListener('load', function () {
canvas.width = this.width;
canvas.height = this.height;
canvas.crossOrigin = "anonymous";
context.drawImage(img, 0, 0);
rotateClockwiseBy90(canvas, context, img);
}
}
function rotateClockwiseBy90(canvas, context, img) {
const width = canvas.width;
const height = canvas.height;
const imageData = context.getImageData(0, 0, width, height);
const rotatedImageData = context.createImageData(height, width);
//[redIndex, greenIndex, blueIndex, alphaIndex]
const width4 = width * 4;
const height4 = height * 4;
for (let y = 0; y < height4; y += 4) {
for (let x = 0; x < width4; x += 4) {
rotatedImageData.data[x * height + (height4 - y - 1) - 3] = imageData.data[y * width + x];
rotatedImageData.data[x * height + (height4 - y - 1) - 2] = imageData.data[y * width + x + 1];
rotatedImageData.data[x * height + (height4 - y - 1) - 1] = imageData.data[y * width + x + 2];
rotatedImageData.data[x * height + (height4 - y - 1)] = imageData.data[y * width + x + 3];
}
}
const cw = canvas.width;
canvas.width = canvas.height;
canvas.height = cw;
context.putImageData(rotatedImageData, 0, 0);
}
如果有人试图理解其中的逻辑:
rotatedImageData.data[x * height ...
应该是:
rotatedImageData.data[x / 4 * height * 4 ...
因为对于旋转的阵列,x
表示行数,高度表示行长度,但结果是相同的。
逆时针旋转版本:
for (let y = 0; y < height4; y += 4) {
for (let x = 0; x < width4; x += 4) {
rotatedImageData.data[(height4 * (width - x/4) - height4 + y)] = imageData.data[y * width + x];
rotatedImageData.data[(height4 * (width - x/4) - height4 + y) + 1] = imageData.data[y * width + x + 1];
rotatedImageData.data[(height4 * (width - x/4) - height4 + y) + 2] = imageData.data[y * width + x + 2];
rotatedImageData.data[(height4 * (width - x/4) - height4 + y) + 3] = imageData.data[y * width + x + 3];
}
}
- 图像在旋转 90 度时脱离父 td
- 如何设置对象沿世界x轴旋转90度
- 如何将每个图形旋转90度
- 三.js设置旋转矩阵超过90度时的奇怪行为
- 高图表单击旋转 -90
- 将 d3.parset 可视化效果旋转 90 度(使可视化效果变为水平而不是垂直)
- 如何防止物体在达到完整圆时旋转 360 度
- 获取相机的当前旋转(以度为单位)
- 将矩阵数组旋转 180 度
- 通过手机加载时,画布图像会将图像旋转 90 度
- 自拍时图像旋转了90度
- html将整个画布旋转90度
- 未使用Chrome 37中的.transform应用旋转(90度)
- Three.js -当相机以90度角旋转时,为什么在x轴和z轴上旋转会产生相同的效果?
- 顺时针旋转画布90度,更新宽度和高度
- 旋转背景图像的Div 90度使用JQuery
- 根据其他图像的位置旋转图像90度
- 如何将包含图像的画布旋转90、180、270度
- 使用three.js和tween.js以90度增量旋转对象以创建360度循环
- 将桌子旋转90度