Javascript 旋转'；注'；在画布上始终触摸左上角_Javascript_Html_Canvas

Javascript 旋转'；注'；在画布上始终触摸左上角

javascript html canvas

Javascript 旋转'；注'；在画布上始终触摸左上角,javascript,html,canvas,Javascript,Html,Canvas,对我有效的最终代码是： <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("

对我有效的最终代码是：

    <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>

更多信息

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

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

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

因此，使用这种旋转的坐标结构，我不知道如何将我的正方形（可以是任何大小，以任何角度旋转）移回左侧和顶部（因此它可以容纳尽可能小的空间）

这有意义吗？

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

以下是一些css规则示例：

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

简言之，请参阅：

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

这是一个交互式的工作示例，您可以在此处在线查看：

这也适用于

arc

命令；您应该执行

ctx.arc（x，y，r，0，Math.PI*2，false）

；一个完整的循环。

这是快速完成的伟大工作。不幸的是，它并不能真正帮助我转换新坐标的斜率。我刚刚意识到，当你旋转时，画布会在斜坡上解释更多的平移，而不是以水平真实的方式。这让我很困惑。可能是时候进行三角刷新了。@SenicaGonzalez绘制旋转的矩形后，您可以

restore（）

恢复上下文，或者如果不想继续在转换的坐标系中工作，可以手动取消旋转。遗憾的是，我不理解你的问题（我不知道“平移新坐标的斜率”是什么意思），但我很高兴你找到了一个适合你的答案。@Phrogz。是的，我知道我可以恢复或取消旋转它，但我想保持矩形旋转，但只需将其向后移动，如示例中所示，移动到左边缘和上边缘。但是，旋转矩形后，x、y坐标相对于屏幕不是上下移动的，坐标也会旋转。因此，我无法尝试找出如何将旋转的矩形和旋转的坐标移到所需的位置。@Senica好吧，请随意发布一个更新的、不起作用但自包含的示例，以获得进一步帮助。（将代码缩减到最低限度以显示您的问题将更容易帮助您。）@Phrog，说真的，谢谢您的帮助。虽然这真的只是为了好玩，但我真的很喜欢这些东西。我添加了更多信息。我没有真正添加任何代码，因为这不会有任何帮助。我发现这是一个很好的解决方法；）但考虑到我无法计算出坡度坐标，现在就只能这样了。我认为这是一个更好的方法。在画布中旋转元素可能是在像素级别完成的（每个像素都是独立计算的），这将需要更多的资源。此解决方案旋转整个块，速度可能更快。我猜你很擅长。

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

<!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>

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