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

您可以使用仿射变换，如旋转，平移，缩放。首先保存当前上下文

<?xml version="1.0"?>
<root>
    <subroot>
        <data>
            <Details>
                <accountNumber>1111X</accountNumber>
                <accountType>D</accountType>
                <Total>10000</Total>
                <Interest>10</Interest>
                <NewFlag>N</NewFlag>
            </Details>
        </data>
        <data>
            <Details>
                <ErrorCode>70</ErrorCode>
                <ErrorDesc>This is ERROR</ErrorDesc>
                <accountNumber>2222</accountNumber>
                <accountType>D</accountType>
            </Details>
        </data>
    </subroot>
</root>

设置轮换和翻译see document

恢复状态

context.save()

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();

<强>解释

由于旋转是围绕协调器旋转的（O（0,0），我们首先需要<canvas id="canvas" width="500" height="500" />到我们想要绘制的位置：

translate

然后执行context.translate(eyeBrowX, eyeBrowY); // eyebrow position here：

rotation

然后绘制矩形，使矩形的中心为O（0,0） - 然后它将围绕其中心旋转。

context.rotate(angleInRadian);

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();

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

这样您就不需要保存上下文了。顺便说一句canvas不允许你单独改变事物。您需要清除并重绘。（例如它如何用于动画）。如果您想要更多控制并单独修改内容，则需要一个渲染库，如Pixi.js

如何在Javascript中旋转矩形

2 个答案: