Javascript 如何在HTML5画布标签上复制线段，旋转线段并将其放置在原始线段旁边？_Javascript_Html_Canvas_Html5 Canvas

Javascript 如何在HTML5画布标签上复制线段，旋转线段并将其放置在原始线段旁边？

javascript html canvas html5-canvas

Javascript 如何在HTML5画布标签上复制线段，旋转线段并将其放置在原始线段旁边？,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,首先，我试图找到解决问题的方法，但我认为我不知道如何在网上搜索解决方案。好的，我有一个通过线段绘制的图像：moveTo，lineTo等正如您所见，我们可以将图像分成4个部分，这些部分基本相同，但旋转并放置在其他元素旁边。我的意思是，如果你从中心以90度的角度画4条线，你可以看到相同的图案基本上，我试图做的是通过插入moveTo手动绘制画布的一部分，其余部分以某种方式生成以节省一些时间不确定我是否解释好了我的问题，对不起，这是我发布的第一个stackoverflow问题我的意思是，我找到

首先，我试图找到解决问题的方法，但我认为我不知道如何在网上搜索解决方案。好的，我有一个通过线段绘制的图像：moveTo，lineTo等

正如您所见，我们可以将图像分成4个部分，这些部分基本相同，但旋转并放置在其他元素旁边。我的意思是，如果你从中心以90度的角度画4条线，你可以看到相同的图案

基本上，我试图做的是通过插入moveTo手动绘制画布的一部分，其余部分以某种方式生成以节省一些时间

不确定我是否解释好了我的问题，对不起，这是我发布的第一个stackoverflow问题

我的意思是，我找到了一种方法，使用4个不同的画布元素，然后旋转每个画布。我正在寻找一种在一个画布元素中完成一切的方法。但不确定这是否可行

我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Model 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body  onload="draw();">
    <canvas id="canvas_id" width="150" height="150" style="border:1px solid #000000;"></canvas>

<!-- 1---->
    <script type="text/javascript">

        function draw() {
            var canvas = document.getElementById('canvas_id');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                //top left square
                ctx.beginPath();
                ctx.moveTo(10, 10);
                ctx.lineTo(10, 40);
                ctx.lineTo(40, 40);
                ctx.lineTo(40, 10);
                ctx.lineTo(10, 10);
                ctx.fillStyle = "red";
                ctx.fill();

                //down left square
                ctx.beginPath();
                ctx.moveTo(10, 100);
                ctx.lineTo(10, 130);
                ctx.lineTo(40,130);
                ctx.lineTo(40, 100);
                ctx.lineTo(10, 100);
                ctx.fillStyle = "red";
                ctx.fill();

                //top right square
                ctx.beginPath();
                ctx.moveTo(100, 10);
                ctx.lineTo(130, 10);
                ctx.lineTo(130, 40);
                ctx.lineTo(100, 40);
                ctx.lineTo(100, 10);
                ctx.fillStyle = "red";
                ctx.fill();

                //down right square
                ctx.beginPath();
                ctx.moveTo(100, 100);
                ctx.lineTo(130, 100);
                ctx.lineTo(130, 130);
                ctx.lineTo(100, 130);
                ctx.lineTo(100, 100);
                ctx.fillStyle = "red";
                ctx.fill();

                //center figure

                //1
                ctx.beginPath();
                ctx.moveTo(70, 10);
                ctx.lineTo(10, 70);
                ctx.lineTo(70, 130);
                ctx.lineTo(130, 70);
                ctx.lineTo(70, 10);

                // inside
                ctx.moveTo(70, 30);
                ctx.lineTo(30, 70);
                ctx.lineTo(70, 110);
                ctx.lineTo(110, 70);
                ctx.lineTo(70, 30);

                //square 1
                ctx.moveTo(60, 60);
                ctx.lineTo(80, 60);
                ctx.lineTo(80, 80);
                ctx.lineTo(60, 80);
                ctx.lineTo(60, 60);

                //square 2
                ctx.moveTo(50, 50);
                ctx.lineTo(90, 50);
                ctx.lineTo(90, 90);
                ctx.lineTo(50, 90);
                ctx.lineTo(50, 50);

                ctx.stroke();
                }
        }
    </script>

</body>

</html>


模式1
函数绘图（）{
var canvas=document.getElementById（'canvas_id'）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
//左上角正方形
ctx.beginPath（）；
ctx.moveTo（10,10）；
ctx.lineTo（10,40）；
ctx.lineTo（40,40）；
ctx.lineTo（40,10）；
ctx.lineTo（10,10）；
ctx.fillStyle=“红色”；
ctx.fill（）；
//左下方格
ctx.beginPath（）；
ctx.moveTo（10100）；
ctx.lineTo（10130）；
ctx.lineTo（40130）；
ctx.lineTo（40100）；
ctx.lineTo（10100）；
ctx.fillStyle=“红色”；
ctx.fill（）；
//右上角正方形
ctx.beginPath（）；
ctx.moveTo（100,10）；
ctx.lineTo（130,10）；
ctx.lineTo（130,40）；
ctx.lineTo（100,40）；
ctx.lineTo（100,10）；
ctx.fillStyle=“红色”；
ctx.fill（）；
//右下角广场
ctx.beginPath（）；
ctx.moveTo（100100）；
ctx.lineTo（130100）；
ctx.lineTo（130130）；
ctx.lineTo（100130）；
ctx.lineTo（100100）；
ctx.fillStyle=“红色”；
ctx.fill（）；
//中间人物
//1
ctx.beginPath（）；
ctx.moveTo（70,10）；
ctx.lineTo（10,70）；
ctx.lineTo（70130）；
ctx.lineTo（130,70）；
ctx.lineTo（70,10）；
//里面
ctx.moveTo（70,30）；
ctx.lineTo（30,70）；
ctx.lineTo（70110）；
ctx.lineTo（110,70）；
ctx.lineTo（70,30）；
//广场1
ctx.moveTo（60,60）；
ctx.lineTo（80,60）；
ctx.lineTo（80,80）；
ctx.lineTo（60,80）；
ctx.lineTo（60,60）；
//广场2
ctx.moveTo（50,50）；
ctx.lineTo（90,50）；
ctx.lineTo（90,90）；
ctx.lineTo（50,90）；
ctx.lineTo（50,50）；
ctx.stroke（）；
}
}

我希望我能很好地理解您的需求。您可以使用

角度

和

x，y

位置参数对

绘图

函数进行参数化，也可以复制、旋转和粘贴画布的一部分。我想你会喜欢第二种解决方案。基本上，复制画布，旋转画布，绘制一些东西，然后恢复更改。您可以使用此功能：

function draw(canvas, ctx, x, y, angle) {
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(angle * Math.PI / 180);
  ctx.translate(-(canvas.width / 2), -(canvas.height / 2));
  // drawing begin
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(10, 40);
  ctx.lineTo(40, 40);
  ctx.lineTo(40, 10);
  ctx.lineTo(10, 10);
  ctx.lineTo(30, 30);
  ctx.strokeStyle = "red";
  ctx.stroke();
  // drawing end
  ctx.restore();
}

您可以这样使用它：

// draw something with a 90° angle
draw(canvas, ctx, 0, 0, 90);

// draw something with a 180° angle
draw(canvas, ctx, 0, 0, 180);

和

坐标是旋转画布的坐标，因此

0，0

每次都将处于该角度

这是一把小提琴：