你可以在画布上绘制弧形图像吗？

您可以绘制弧线，并且您可以使用javascript在画布上绘制图像，但无论如何要做到这一点吗？也就是说，无论如何，绘制图像的弧线而不是实线？你可以在画布上绘制弧形图像吗？

如果不是，是否有独立的方式来弧形图像？

我试着沿着圆弧的点对图像进行逐像素变换，但最终变得非常慢并且看起来很差，因为我无法直接从javascript获取像素数据（或者可以吗？？我没有看到一种方法），所以对于每个像素，我需要计算沿圆弧的点，绘制当前图像像素，重新绘制它，将图像数据绘制到计算点，然后清除画布上的该点。

来源

2011-08-05 Megatron

您是否尝试过基于图像将strokeStyle设置为CanvasPattern？它看起来像你可以做这样的事情（假设img是要借鉴和ctx是CanvasRenderingContext2D的HTMLImageElement）：

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

来源

2011-08-05 05:29:16 sethobrien

做它就像这样不如你能得到它。它更好地使用ctx.translate弧的左上角（以便模式原点将存在于该点），然后围绕该弧画出弧线。同样的大小，你可能需要缩放模式，以获得所需的大小与ctx.scale（） – Rickard

嗯有趣，我不知道你可以使用一个图像的笔画。感谢您的提示:) – Megatron

@Metrontron我不知道，直到我在[规范]（http://dev.w3.org/html5/2dcontext/Overview.html#conformance-requirements）中查找它。我假设你已经在你的口袋里有这样的参考，但作为提醒，它通常有这种事情的答案。 – sethobrien

使用这个网站创建弧： -

<canvas id="myCanvas" width="578" height="250"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var x = canvas.width/2; 
    var y = canvas.height/2; 
    var radius = 75; 
    var startAngle = .8 * Math.PI; 
    var endAngle = 2.2 * Math.PI; 
    var counterClockwise = false; 

    context.beginPath(); 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
    context.lineWidth = 30; 

    // line color 
    context.strokeStyle = 'blue'; 
    context.stroke(); 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var x = canvas.width/2; 
    var y = canvas.height/2; 
    var radius = 75; 
    var startAngle = 8 * Math.PI; 
    var endAngle =2.3 * Math.PI; 
    var counterClockwise = false; 

    context.beginPath(); 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
    context.lineWidth = 30; 

    // line color 
    context.strokeStyle = 'red'; 
    context.stroke(); 
</script>

来源

2015-12-03 12:04:50

你可以在画布上绘制弧形图像吗？

回答

相关问题