试图用图像替换形状

我对整个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

试图用图像替换形状

回答

相关问题