如何复制 HTML5 CANVAS 标签上的线段旋转并将其放置在原始线段旁边？
[英]How do I copy line segment on HTML5 CANVAS tag rotate it and place it next to the original segment?
问题描述
Firstly I have tried to find solution to my problem but I do not think that I know how to search online for solutions.
首先，我试图找到解决问题的方法，但我认为我不知道如何在线搜索解决方案。 Okay so I have this image that is drawn via line segments: moveTo, lineTo etc.好的，所以我有这个通过线段绘制的图像：moveTo、lineTo 等。
As you can see we could divide the image into 4 parts that are essentially the same but rotated and placed next to other elements.如您所见，我们可以将图像分成 4 个部分，这些部分基本相同，但经过旋转并放置在其他元素旁边。 What I mean by this if you draw 4 lines from the center with 90 angle you can notice the same pattern.我的意思是，如果你从中心以 90 角画 4 条线，你会注意到相同的图案。
Basically what I am trying to do is to have one part of the canvas drawn manually by inserting moveTo and the rest to somehow generate to save some time ofc.基本上我想要做的是通过插入 moveTo 和 rest 以某种方式生成以节省一些时间来手动绘制 canvas 的一部分。
Not sure if I explained well my problem, excuse me this is my first stackoverflow question posted.不确定我是否很好地解释了我的问题，对不起，这是我发布的第一个 stackoverflow 问题。
I mean I found a way to do this by having 4 different CANVAS elements and then rotate each canvas.我的意思是我找到了一种方法，方法是使用 4 个不同的 CANVAS 元素，然后旋转每个 canvas。 I am looking for a way to do everything in one CANVAS element.我正在寻找一种在一个 CANVAS 元素中完成所有操作的方法。 But not sure if that is possible.但不确定这是否可能。
My code below:我的代码如下：
<!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 个解决方案
解决方案1
0 已采纳 2019-10-15 07:33:33
I hope that I understood well what you need.我希望我能很好地理解您的需求。 You can either parametrize your draw function with an angle , and a x, y position parameters, or copy, rotate and paste a part of the canvas.您可以使用angle参数化draw function 和x, y position 参数，或者复制、旋转和粘贴 canvas 的一部分。 I assumed you would prefer the second solution.我假设您更喜欢第二种解决方案。 Basically, copy your canvas, rotate it, draw something, then restore your changes.基本上，复制您的 canvas，旋转它，绘制一些东西，然后恢复您的更改。 You can use this function:您可以使用这个 function：
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();
}
You can use it like this:你可以像这样使用它：
// draw something with a 90° angle
draw(canvas, ctx, 0, 0, 90);
// draw something with a 180° angle
draw(canvas, ctx, 0, 0, 180);
The x and y coordinates are the ones of the rotated canvas, so 0, 0 will be in the angle each time. x和y坐标是旋转后的 canvas 的坐标，所以0, 0每次都会在角度。
Here's a fiddle: https://jsfiddle.net/nmerinian/kt3f782o/19/这是一个小提琴： https://jsfiddle.net/nmerinian/kt3f782o/19/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.