JavaScriptで四角形を回転させる方法

Question

こんにちは、私は顔文字の顔を描く必要がある課題に取り組んでいます。

function sadFace() { 
//Drawing the sad face 
context.beginPath(); 
    context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour 
    context.lineWidth = 3; 
    context.arc(300,300,200,0,Math.PI*4,true); 
    context.fill(); 
context.stroke(); 
//Left Eyebrow 
context.beginPath();    
    context.fillStyle = "rgb(0,0,0)"; 
    context.rect(170,180,90,15); 
    context.fill(); 
context.stroke(); 

これは私の現在のコードです。最初に画像の「眉」を回転させ、画像全体を回転させずに眉を回転させるにはどうすればよいですか？ありがとう！

Answer 1

回転、平行移動、縮尺などのアフィン変換を使用できます。 まず

context.restore() 

const canvas = document.getElementById("canvas") 
 
const context = canvas.getContext("2d"); 
 

 
context.beginPath(); 
 
    context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour 
 
    context.lineWidth = 3; 
 
    context.arc(300,300,200,0,Math.PI*4,true); 
 
    context.fill(); 
 
context.stroke(); 
 
//Left Eyebrow 
 
context.save(); 
 
context.translate(210, 188); 
 
context.rotate(30 * Math.PI/180); 
 
context.beginPath();    
 
    context.fillStyle = "rgb(0,0,0)"; 
 
    context.rect(-45,-8,90,15); 
 
    context.fill(); 
 
context.stroke(); 
 
context.restore(); 
 

 
context.save(); 
 
context.translate(380, 188); 
 
context.rotate(-30 * Math.PI/180); 
 
context.beginPath();    
 
    context.fillStyle = "rgb(0,0,0)"; 
 
    context.rect(-45,-8,90,15); 
 
    context.fill(); 
 
context.stroke(); 
 
context.restore();

<canvas id="canvas" width="500" height="500" />

状態を復元

に

context.save() 

設定回転と平行移動see document

現在のコンテキストを保存します説明：

コーディネーターの周りを回転された回転以来（O（0、0）、我々はtranslateに必要な、我々が描きたい位置に最初：

：

context.translate(eyeBrowX, eyeBrowY); // eyebrow position here 

その後rotationを行います

context.rotate(angleInRadian); 

次に、矩形の中心がO（0、0）になるように矩形を描画します。次に、矩形を中心に回転します。

context.beginPath();    
context.fillStyle = "rgb(0,0,0)"; 
context.rect(-width/2, -height/2, width, height); 
context.fill(); 
context.stroke(); 

Answer 2

何も回転させる必要はありません。 rectを作成する代わりに、眉を引く線を使用してください。あなたはコンテキストを保存する必要はありません。このように、この

let canvas = document.getElementById("myCanvas"); 
 
    let context = canvas.getContext("2d"); 
 
    context.beginPath(); 
 
    context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour 
 
    context.lineWidth = 3; 
 
    context.arc(300,300,200,0,Math.PI*4,true); 
 
    context.fill(); 
 
    context.stroke(); 
 
    //Left Eyebrow 
 
    context.beginPath();    
 
    context.moveTo(170,180); 
 
    context.lineTo(260,195); 
 
    context.lineWidth = 10 
 
    context.fillStyle = "rgb(0,0,0)"; 
 
    context.fill(); 
 
    context.stroke();

\t \t <canvas id="myCanvas" width="800" height="800"></canvas>

のような斜めのパスで描か取りに行くためにラインを教えてください。ちなみにcanvasでは、個別に変更することはできません。クリアして再描画する必要があります。 （例えばアニメーションの仕組みなど）。より多くの制御を必要とし、個別に変更する場合は、Pixi.jsのようなレンダリングライブラリが必要です