你能在画布上的弧中画图像吗？ [英] Can you draw images in an arc on a canvas?

问题描述

你可以绘制弧线，你可以使用javascript在画布上绘制图像，但是有没有做到这两个？

You can draw arcs and you can draw images on a canvas using javascript, but is there anyway to do both? that is, is there anyway to draw an image as the arc instead of a solid line?

如果没有，是否有一个单独的弧形图像的方法？

If not, is there a seperate way to arc an image?

我尝试沿着弧的点逐像素地变换图像，但它最终非常慢，看起来很差，因为我不能直接得到像素数据从javascript（或者你没有看到一种方式）所以对于每个像素，我需要计算沿弧的点，绘制当前图像像素，重新获取，绘制图像数据到计算点，然后清除那个点在画布上。

I tried doing a pixel-by-pixel transformation of the image along the points of an arc, but it ended up being very slow and looking pretty poor since I can't directly get pixel data from javascript (or can you? I didnt see a way) so for each pixel, I needed to calculate the point along the arc, draw the current image pixel, refetch it, draw the image data to the calculated point, then clear that point on the canvas.

推荐答案

您是否尝试将strokeStyle设置为基于图像的CanvasPattern？看起来你可以这样做（假设 img 是你想要绘制的HTMLImageElement， ctx 是a CanvasRenderingContext2D）：

Have you tried setting the strokeStyle to a CanvasPattern based on an image? It looks like you could do something like this (assuming img is an HTMLImageElement that you want to draw from and ctx is a CanvasRenderingContext2D):

var pattern = ctx.createPattern(img, "repeat");
ctx.strokeStyle = pattern;
ctx.beginPath();
ctx.arc(123, 408, 80, 0, 1.5*Math.PI, false);
ctx.stroke();

这篇关于你能在画布上的弧中画图像吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！