旋转“注释”；在画布上始终触摸左上角

Question

对我有用的最终代码是：

    <canvas id="bg-admin-canvas" width="500" height="500" style="margin:15px; background:#09F;"></canvas>
    <script>
        var postit = function(width,height,angle){
            var canvas = document.getElementById("bg-admin-canvas");
            var ctx = canvas.getContext("2d");

            var radians = angle * Math.PI / 180;                
            var move = width*Math.sin(radians);
            if(angle < 0 ){ ctx.translate(0,-move); }else{ ctx.translate(move,0); }
            ctx.rotate(radians);

            var gradient = ctx.createLinearGradient(0,height,width/2,height/2);
            gradient.addColorStop(0.05,"rgba(0,0,0,0)");
            gradient.addColorStop(0.5,"rgba(0,0,0,0.3)");
            ctx.fillStyle = gradient;
            ctx.fillRect(0,0,width,height);

            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(width, 0);
            ctx.lineTo(width,height);
            ctx.lineTo(width-width*.8,height-height*.02);
            ctx.quadraticCurveTo(0+width*.02,height-height*.02,0+width*.02,(height - height*.2));
            ctx.closePath();
            var gradient = ctx.createLinearGradient(0,height,width/2,height/2);
            gradient.addColorStop(0,'#f7f8b9');
            gradient.addColorStop(1,'#feffcf');
            ctx.fillStyle = gradient;
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(width-width*.8,height-height*.02);
            ctx.quadraticCurveTo(0+width*.02,height-height*.02,0+width*.02,(height - height*.2));
            ctx.quadraticCurveTo(width*.05,height-height*.05,width*.1,height-height*.1);
            ctx.quadraticCurveTo(width*.1,height-height*.07,width-width*.8,height-height*.02);
            ctx.closePath();
            ctx.fillStyle = '#ffffff';
            ctx.fill();
            var gradient = ctx.createLinearGradient(0,height,width*.1,height-height*.1);
            gradient.addColorStop(0,"rgba(222,222,163,0.8)");
            gradient.addColorStop(1,'#feffcf');
            ctx.fillStyle = gradient;
            ctx.fill();

        }
        postit(300, 300, 10);
    </script>

---

嗨，

我用 html5 的画布和一些 js 制作了一个快速而肮脏的“便利贴”便条。

我希望能够以任何我想要的方式旋转它们，所以我尝试使用翻译。在下面的示例中，我将其翻译为 0,250，以便您可以看到整个内容。

理想情况下，我知道如果我的画布是 300,300 那么我会 ctx.翻译(150,150); ctx.旋转(-30); ctx.翻译(-150,-150);

当然，因为我正在旋转一个正方形，所以它被切断了。

我如何旋转正方形并将其移动到画布上，以便整个内容显示出来，但位于画布的左上角？

我添加了一张图像，我的想法是获取三角形的高度并将其移动那么多，但是翻译后，它似乎工作得不太好。

我将粘贴我的整个函数，以便您可以查看它，但如果您有任何想法，我将不胜感激。这不重要，今天只是闲聊而已。

var postit = function(width,height,angle){
            var canvas = jQuery("#bg-admin-canvas").get(0);
            var ctx = canvas.getContext("2d");

            /*var area = (width*width*Math.sin(angle))/2;
            var h = (area*2) / width + 30;
            ctx.translate(0,h);
            */
            //ctx.translate(150,150);
            ctx.translate(0,250);
            ctx.rotate(angle*Math.PI / 180);
            //ctx.translate(-150,-150);

            var gradient = ctx.createLinearGradient(0,height,width/2,height/2);
            gradient.addColorStop(0.05,"rgba(0,0,0,0)");
            gradient.addColorStop(0.5,"rgba(0,0,0,0.3)");
            ctx.fillStyle = gradient;
            ctx.fillRect(0,0,width,height);

            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(width, 0);
            ctx.lineTo(width,height);
            ctx.lineTo(width-width*.8,height-height*.02);
            ctx.quadraticCurveTo(0+width*.02,height-height*.02,0+width*.02,(height - height*.2));
            ctx.closePath();
            var gradient = ctx.createLinearGradient(0,height,width/2,height/2);
            gradient.addColorStop(0,'#f7f8b9');
            gradient.addColorStop(1,'#feffcf');
            ctx.fillStyle = gradient;
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(width-width*.8,height-height*.02);
            ctx.quadraticCurveTo(0+width*.02,height-height*.02,0+width*.02,(height - height*.2));
            ctx.quadraticCurveTo(width*.05,height-height*.05,width*.1,height-height*.1);
            ctx.quadraticCurveTo(width*.1,height-height*.07,width-width*.8,height-height*.02);
            ctx.closePath();
            ctx.fillStyle = '#ffffff';
            ctx.fill();
            var gradient = ctx.createLinearGradient(0,height,width*.1,height-height*.1);
            gradient.addColorStop(0,"rgba(222,222,163,0.8)");
            gradient.addColorStop(1,'#feffcf');
            ctx.fillStyle = gradient;
            ctx.fill();
        }
        postit(300, 300, -35);

---

更多信息

Phrog，我想你知道我想做什么。这张图片显示了我想要做的事情： 现在，唯一的事情是，我希望能够传递任何宽度、高度和角度，并即时进行调整。

作为以下代码的示例：

var canvas = document.getElementById("bg-admin-canvas");
var ctx = canvas.getContext("2d");
ctx.arc(0,0,3,0,360,true); ctx.fill();
ctx.translate(50, 50);
ctx.arc(0,0,3,0,360,true); ctx.fill();
ctx.translate(-25, -25);
ctx.arc(0,0,3,0,360,true); ctx.fill();

我得到以下图像： 现在，如果我在其中添加一个旋转，如下所示：

var canvas = document.getElementById("bg-admin-canvas");
var ctx = canvas.getContext("2d");
ctx.arc(0,0,3,0,360,true); ctx.fill();
ctx.translate(50, 50);
ctx.arc(0,0,3,0,360,true); ctx.fill();
ctx.rotate(30*Math.PI/180);
ctx.translate(-25, -25);
ctx.arc(0,0,3,0,360,true); ctx.fill();

我现在有一个倾斜的坐标，结果是：

正如我发现的，这是因为坐标不再是水平和垂直的。

因此，通过这种旋转的坐标结构，我无法弄清楚如何将我的正方形（可以是任何大小并以任何角度旋转）移回左侧和顶部（因此它适合尽可能小的空间）

是吗？有道理吗？

Answer 1

简而言之：

• 在 Y 方向上平移上下文，仅将角放在它应该在的位置。
• 围绕该偏移点旋转上下文。
• 在 0,0 处绘制对象。

这是一个交互式的工作示例，您可以在此处在线查看：
http://phrogz.net/tmp/canvas_rotate_square_in_corner.html

<!DOCTYPE HTML> 
<html lang="en"><head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>HTML5 Canvas Rotate Square in Corner</title> 
  <style type="text/css" media="screen"> 
    body { background:#eee; margin:2em; text-align:center }
    canvas { display:block; margin:auto; background:#fff; border:1px solid #ccc }
  </style> 
</head><body> 
<canvas width="250" height="200"></canvas>
<script type="text/javascript" charset="utf-8"> 
  var can = document.getElementsByTagName('canvas')[0];
  var ctx = can.getContext('2d');
  ctx.strokeStyle = '#600'; ctx.lineWidth = 2; ctx.lineJoin = 'round';
  ctx.fillStyle = '#ff0'
  document.body.onmousemove = function(evt){
    var w=140, h=120;
    var angle = evt ? (evt.pageX - can.offsetLeft)/100 : 0;
    angle = Math.max(Math.min(Math.PI/2,angle),0);
    ctx.clearRect(0,0,can.width,can.height); ctx.beginPath();
    ctx.save();
    ctx.translate(1,w*Math.sin(angle)+1);
    ctx.rotate(-angle);
    ctx.fillRect(0,0,w,h);
    ctx.strokeRect(0,0,w,h);
    ctx.restore();
  };
  document.body.onmousemove();
</script> 
</body></html>

分析

在上图中，点 A 是便利贴的左上角，点 >B 是右上角。我们将便利贴从正常角度旋转-a弧度（顺时针旋转为正，逆时针旋转为负）。

我们可以看到，当便利贴旋转时，点A始终停留在y轴上，因此我们只需要计算y向下移动了多远> 轴来移动它。该距离在图中表示为BD。从三角学我们知道
sin(a) = BD / AB

重新排列这个公式可以得出
BD = AB * sin(a)

我们知道 AB 是便利贴的宽度。一些细节：

1. 因为我们的角度将表示为负数，而负数的 sin 会产生负结果，但因为我们想要正结果，所以我们必须对结果
   BD = -AB * sin(-a)
   或者只是“作弊”并使用正角度：
   BD = AB * sin(a)

2. 我们需要记住在旋转之前翻译我们的上下文它，以便我们首先直接沿着轴移动以在正确的位置建立我们的原点。

3. 请记住，HTML5 Canvas 中的旋转使用弧度（而不是度数）。如果要旋转 20 度，则需要乘以 Math.PI/180 将其转换为弧度：

    ctx.rotate( 20*Math.PI/180 );
   

这也适用于 arc 命令；你应该这样做 ctx.arc(x,y,r,0,Math.PI*2,false);一个完整的圆圈。

Answer 2

您应该创建画布元素，然后使用 CSS 旋转它。它将使您的画布保持完整，并且仅旋转元素本身。

以下是一些 css 规则示例：

-webkit-transform: rotate(-30deg); 
-moz-transform: rotate(-30deg);

请参阅 http://snook.ca/archives/html_and_css/ CSS 文本旋转