[已解决]canvas绘制图片到多边形

Darth_EF

我希望要让一个图片绘制在canvas的一个多边形上，可是似乎CanvasRenderingContext2D的绘制图片的接口只有矩形的，应该怎么做呢？

最佳答案

月排行榜 / 总排行榜

FishC_GPT

2023-11-26 03:19:02

小甲鱼的二师兄 发表于 2023-11-26 03:18
@FishC_GPT 我希望要让一个图片绘制在canvas的一个多 ...

你可以使用一种称为纹理映射（Texture Mapping）的技术，在一个多边形上绘制图片。下面是一个使用JavaScript和Canvas进行纹理映射的示例代码：

1. // 获取Canvas元素和绘图上下文
2. var canvas = document.getElementById('myCanvas');
3. var ctx = canvas.getContext('2d');
5. // 创建一个多边形的路径
6. ctx.beginPath();
7. ctx.moveTo(100, 100); // 第一个顶点
8. ctx.lineTo(200, 150); // 第二个顶点
9. ctx.lineTo(150, 250); // 第三个顶点
10. ctx.closePath();
12. // 填充多边形
13. ctx.fillStyle = '#FF0000';
14. ctx.fill();
16. // 创建一个图片元素
17. var img = new Image();
18. img.src = 'image.png'; // 替换成你的图片路径
20. // 在图片加载完成后执行绘制操作
21. img.onload = function() {
22.   // 首先保存当前的绘图状态
23.   ctx.save();
25.   // 开始裁剪出多边形的区域
26.   ctx.beginPath();
27.   ctx.moveTo(100, 100); // 第一个顶点
28.   ctx.lineTo(200, 150); // 第二个顶点
29.   ctx.lineTo(150, 250); // 第三个顶点
30.   ctx.closePath();
31.   ctx.clip();
33.   // 绘制图片，让图片填充在多边形的区域内
34.   ctx.drawImage(img, 100, 100);
36.   // 恢复之前保存的绘图状态，避免影响后续绘制
37.   ctx.restore();
38. }

复制代码

请将代码中的 `myCanvas` 替换为你实际使用的Canvas元素的 ID，并将 `image.png` 替换为你要绘制的图片路径。这段代码首先绘制一个红色的多边形，然后使用 `drawImage` 方法在多边形内部绘制图片。

注意，这里的多边形是通过绘制路径的方式定义的，你可以根据自己的需求来修改多边形的顶点坐标。

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

kogawananari

1. <canvas id='c'>
   
2. <script>
   
3. const ctx = c.getContext("2d")
   
4. ctx.beginPath()
   
5. ctx.lineWidth = 10
   
6. ctx.strokeStyle="green"
   
7. ctx.lineCap="round"
   
8. ctx.moveTo(20,20)
   
9. ctx.lineTo(20,100)
   
10. ctx.lineTo(80,100)
    
11. ctx.closePath()
    
12. ctx.stroke()
    
13. </script>

复制代码

Darth_EF

kogawananari 发表于 2020-11-23 10:18

我要图片画到多边形上，不是要画一个多边形

小甲鱼的二师兄

@FishC_GPT 我希望要让一个图片绘制在canvas的一个多边形上，可是似乎CanvasRenderingContext2D的绘制图片的接口只有矩形的，应该怎么做呢？

FishC_GPT

小甲鱼的二师兄 发表于 2023-11-26 03:18
@FishC_GPT 我希望要让一个图片绘制在canvas的一个多 ...

你可以使用一种称为纹理映射（Texture Mapping）的技术，在一个多边形上绘制图片。下面是一个使用JavaScript和Canvas进行纹理映射的示例代码：

1. // 获取Canvas元素和绘图上下文
2. var canvas = document.getElementById('myCanvas');
3. var ctx = canvas.getContext('2d');
5. // 创建一个多边形的路径
6. ctx.beginPath();
7. ctx.moveTo(100, 100); // 第一个顶点
8. ctx.lineTo(200, 150); // 第二个顶点
9. ctx.lineTo(150, 250); // 第三个顶点
10. ctx.closePath();
12. // 填充多边形
13. ctx.fillStyle = '#FF0000';
14. ctx.fill();
16. // 创建一个图片元素
17. var img = new Image();
18. img.src = 'image.png'; // 替换成你的图片路径
20. // 在图片加载完成后执行绘制操作
21. img.onload = function() {
22.   // 首先保存当前的绘图状态
23.   ctx.save();
25.   // 开始裁剪出多边形的区域
26.   ctx.beginPath();
27.   ctx.moveTo(100, 100); // 第一个顶点
28.   ctx.lineTo(200, 150); // 第二个顶点
29.   ctx.lineTo(150, 250); // 第三个顶点
30.   ctx.closePath();
31.   ctx.clip();
33.   // 绘制图片，让图片填充在多边形的区域内
34.   ctx.drawImage(img, 100, 100);
36.   // 恢复之前保存的绘图状态，避免影响后续绘制
37.   ctx.restore();
38. }

复制代码

请将代码中的 `myCanvas` 替换为你实际使用的Canvas元素的 ID，并将 `image.png` 替换为你要绘制的图片路径。这段代码首先绘制一个红色的多边形，然后使用 `drawImage` 方法在多边形内部绘制图片。

注意，这里的多边形是通过绘制路径的方式定义的，你可以根据自己的需求来修改多边形的顶点坐标。

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。

小甲鱼的二师兄

FishC_GPT 发表于 2023-11-26 03:19
你可以使用一种称为纹理映射（Texture Mapping）的技术，在一个多边形上绘制图片。下面是一个使用JavaScr ...

还有其它方法可以实现吗？

FishC_GPT

小甲鱼的二师兄 发表于 2023-11-26 03:20
还有其它方法可以实现吗？

除了使用纹理映射（Texture Mapping）之外，还有一种方法可以将图片绘制在多边形上，那就是使用图像剪切（Image Clipping）的方式。

通过使用 `clip()` 方法可以剪切出一个特定形状的区域，然后再在该区域内绘制图片。下面是一个示例代码：

1. // 获取Canvas元素和绘图上下文
2. var canvas = document.getElementById('myCanvas');
3. var ctx = canvas.getContext('2d');
5. // 创建一个多边形的路径
6. ctx.beginPath();
7. ctx.moveTo(100, 100); // 第一个顶点
8. ctx.lineTo(200, 150); // 第二个顶点
9. ctx.lineTo(150, 250); // 第三个顶点
10. ctx.closePath();
12. // 使用clip()方法剪切出多边形的区域
13. ctx.clip();
15. // 创建一个图片元素
16. var img = new Image();
17. img.src = 'image.png'; // 替换成你的图片路径
19. // 在图片加载完成后执行绘制操作
20. img.onload = function() {
21.   // 绘制图片，在剪切区域内部进行绘制
22.   ctx.drawImage(img, 100, 100);
23. }

复制代码

以上代码首先绘制了一个多边形路径，然后使用 `clip()` 方法剪切出了多边形的区域。接着加载了一张图片，并在图片加载完成后使用 `drawImage()` 方法将图片绘制在剪切区域内部。

请将代码中的 `myCanvas` 替换为你实际使用的Canvas元素的 ID，并将 `image.png` 替换为你要绘制的图片路径。

希望这种方法对你有所帮助！

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。