曲線の回転移動となると、ちょっと難しそうです。
それを簡単にしてしまう方法が、ペン軸そのものの回転です。
◈ y ＝ x2 ＋ 1
という 2 次関数の方程式の曲線を傾けて描きたいなら、回転移動の中心点にペンの基準点を平行移動させてから、ペン軸を回転して、あとは通常の手順で、細切れのラインを連続して描けばよいのです。描線後は、まずペン軸の回転をもとに戻してから、最後にペンの平行移動をもとに戻します。
var cvs = document.getElementById('sample_canvas');
var pen = cvs.getContext('2d');
var rad = Math.PI/10;
var g = 50;
// Canvas の中心にペン軸を移動させる
pen.translate(cvs.width/2, cvs.height/2);
// ペン軸を回転させる
pen.rotate(rad);
// 放物線を描線する
pen.beginPath();
pen.moveTo(-2*g, -5*g);
for (var i=-1.9; i<=2.1; i+=0.1) {
pen.lineTo(i*g, -(i*i+1)*g);
}
pen.stroke();
// ペン軸の回転を戻す
pen.rotate(-rad);
// Canvas の左上にペン軸の基準点を戻す
pen.translate(-cvs.width/2, -cvs.height/2);
しかしながらこの手順では、曲線上の座標の数値がわからなくなるという問題が残ってしまいますので、ペン軸の回転を使わず、計算式による手順を構築して、曲線の回転移動を実現してみたいと思ったのです。
var theta = 角度 °;
var x = 基本の x 座標;
var y = -(x*x + 1);
var r = Math.sqrt(x*x + y*y);
var deg = Math.atan2(y, x) * 180/Math.PI;
deg += theta;
var dx = r * Math.cos(deg * Math.PI/180);
var dy = r * Math.sin(deg * Math.PI/180);
document.getElementById('y_parabola').innerHTML = -Math.round(y * 100)/100;
document.getElementById('para_x').innerHTML = Math.round(dx * Math.pow(10, 5))/Math.pow(10, 5);
document.getElementById('para_y').innerHTML = -Math.round(dy * Math.pow(10, 5))/Math.pow(10, 5);
pen.translate(cvs.width/2, cvs.height/2);
// 放物線を描線する
pen.strokeStyle = 'orangered';
pen.lineWidth = 1;
pen.beginPath();
x = -2.4;
y = -(x*x + 1);
r = Math.sqrt(x*x + y*y);
deg = Math.atan2(y, x) * 180/Math.PI;
deg += theta;
dx = r * Math.cos(deg * Math.PI/180);
dy = r * Math.sin(deg * Math.PI/180);
pen.moveTo(dx*g, dy*g);
for (i=-2.3; i<2.5; i+=0.1) {
x = i;
y = -(x*x + 1);
r = Math.sqrt(x*x + y*y);
deg = Math.atan2(y, x) * 180/Math.PI;
deg += theta;
dx = r * Math.cos(deg * Math.PI/180);
dy = r * Math.sin(deg * Math.PI/180);
pen.lineTo(dx*g, dy*g);
}
pen.stroke();
pen.translate(-cvs.width/2, -cvs.height/2);
test Canvas 回転する放物線
基本の x 座標 ：
基本の y 座標 ： y ＝ x2 ＋ 1 ＝
▣ 回転する x 座標 ：
▣ 回転する y 座標 ：
