試圖用圖像替換形狀

我對整個js都很陌生，並且已經決定了一個很好的方式來了解整個javascript，並且將遵循一個教程來構建一個簡單的破壞塊的遊戲。試圖用圖像替換形狀

遊戲本身運行得很好，但是，我想找到一種方法，用球的圖像替換js繪製的圓，以及其他任何矩形圖像的塊。

我知道（我認爲）我需要以某種方式實現var img = new Image() ，但我並不完全確定如何去做這件事，而不是讓我的圈子完全消失。

我相信我的代碼有問題的區域可能是這一部分：

function drawBall(){ 
    ctx.beginPath(); 
    ctx.arc(x, y, ballSize, 0, Math.PI*2); 
    ctx.fillStyle = "#0095DD"; 
    ctx.fill(); 
    ctx.closePath();

然而，考慮到我新，我可能已經徹底錯過了，所以我也提供了該項目的codepen從而遠。 Codepen

來源

2017-04-06 Tigerr107

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage – PHPglue

因爲這使用'

@ Forty3我會想象解決方案只是編輯幾行，但我已經嘗試了Mozilla頁面上提到的方法，但我似乎無法讓圖像真正顯示出原來的形狀。我的問題是更多的實施比不知道的方法，我很抱歉，如果我不清楚。 – Tigerr107

繪製圓的代碼如下：

ctx.arc(x, y, ballSize, 0, Math.PI*2); 
ctx.fillStyle = "#0095DD"; 
ctx.fill();

因此，而不是畫一個圓圈（其與.arc做）的，可以改爲使用.drawImage方法繪製圖像。 See docs。這將是這個樣子：

ctx.drawImage(image, x, y);

的圖像參數是一個「圖像源」，這可能是隻是在你的HTML純<img>元素。查看如何在我鏈接的文檔中完成的示例。

來源

2017-04-06 03:24:36

是的 - 阿內爾 - 巴蘭說了些什麼。這裏是一個[代碼筆]（http://codepen.io/anon/pen/NpVqYO）從原始文件中分離出來的例子。 – Forty3

試圖用圖像替換形狀

回答

相關問題