如何在圓圈上繪制圖像

Question

我已經在畫布上繪制了兩個圓圈（一個帶有速度，一個帶有一些控件），並且我一直試圖在每個圓圈上繪制圖像，但是我不知道如何執行此操作。 我上傳了圖片。 有人知道嗎？ 另外，有人知道為什么我的紅色圓圈的速度x鍵不起作用嗎？ 代碼： http ： //jsbin.com/vawitiziro/4/edit

Answer 1

這是更新的jsbin： http ://jsbin.com/tibuxezaca/5/edit

1）使用context.clip在自定義路徑中繪制圖像：

context.clip();
var w = imageObject.width || 0;
var h = imageObject.height || 0;
context.drawImage(imageObject, circle.x - (w / 2), circle.y - (h / 2));

2）在更新功能中更新x速度

circle.x += circle.vx;