2

キャンバスに画像を描画しました。

今私がしようとしているのは、ユーザーが左回転ボタンをクリックするとキャンバス全体が左に回転し(つまり、画像が90度回転する)、右に回転するとキャンバスが右に回転することです。

これは私が回転のために試したものです。これを達成するためのコードを提案してください

var canvasId = document.getElementById("preview");
var cntxt = canvasId.getContext("2d");
cntxt.translate($("#preview").width()-1, $("#preview").height()-1);
cntxt.rotate(convertToRadians(90));
cntxt.drawImage(canvasId, 0, 0, $("#preview").width(), $("#preview").height());

function convertToRadians(degree) {
    return degree*(Math.PI/180);
}

作業ソリューション:

// Getting the canvas
var canvasId = document.getElementById(id);
var ctx = canvasId.getContext("2d");

// Store the current transformation matrix
ctx.save();

ctx.setTransform(1,0,0,1,0,0);

// Getting the canvas width and height
var w = $("#preview").width();
var h = $("#preview").height();

ctx.clearRect(0, 0, w, h);

// Restore the transform
ctx.restore();

// TranslateX should be canvaswidth/2 and translateY should be canvasheight/2
var translateX = w/2;
var translateY = h/2;

// translating the context
ctx.translate(translateX,translateY);

// As we need to rotate the image to 90 degrees
// Where r can be 1 to 36 for 10 to 360 degree rotation
var r = 9;
ctx.rotate(r*10*Math.PI/180);
ctx.translate(-translateX,-translateY);

// Drawing canvas
ctx.drawImage(ImageObject, 0, 0, w, h);

画像の適切な縦横比を維持するために、キャンバス全体を回転させることはできませんか?

4

2 に答える 2

4

これがそのための簡単なコードです。

var canvasId = document.getElementById("preview");
var ctx = canvasId.getContext("2d");
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0, 0, $("#preview").width(), $("#preview").height());
var translateX = ($("#preview").width())/2;
var translateY = ($("#preview").height())/2;
ctx.translate(translateX,translateY);
var r = 9;
ctx.rotate(r*10*Math.PI/180);
ctx.translate(-translateX,-translateY);
ctx.drawImage(imgsrc, 0, 0, $("#preview").width(), $("#preview").height());

ここで、10 ～ 360 度の回転の場合、r は 1 ～ 36 です。

于 2012-10-16T11:34:36.433 に答える
0

私がネットで確認したように、上記のプロセスで行ったものよりもはるかに簡単です。

だからここに私がブログに投稿したリンクがあります HTML5キャンバス画像の回転

于 2012-10-18T08:17:17.590 に答える