你可以在畫布上繪製弧形圖像嗎？

您可以繪製弧線，並且您可以使用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

你可以在畫布上繪製弧形圖像嗎？

回答

相關問題