Question

我需要拉一张图片，而下面的图片无效。通过下面的代码在小提琴中的结果只是一个黑色的圆圈。我需要图像出现在这个圆圈内。

var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
    context= myCanvas.getContext('2d');
    context.clearRect(0,0,300,300);
    context.beginPath();
    /* context.fillStyle="#0000ff"; */
    context.src = 'http://s22.postimg.org/8i2xyc8wt/coin.png'; 
    context.arc(x,y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();
    if( x<0 || x>300)
    dx=-dx;
    if( y<0 || y>300)
        dy=-dy;
        x+=dx;
        y+=dy;
    }
setInterval(draw,10);

JSfiddle Demo

Answer 1

尝试使用drawImage代替arc和fill。

var img=document.getElementById("scream");
context.drawImage(img,x,y);

（假设你的页面上有一个这样的元素。很明显你可以使用display：none隐藏它，而不是100％。）

<img id="scream" src="http://s22.postimg.org/8i2xyc8wt/coin.png" style="display:none;" />

Answer 2

如果要在圆圈内绘制图像，则需要在context.clip（）之后使用context.drawImage（）

var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
var coin=new Image();//create new Image element
    coin.src='http://s22.postimg.org/8i2xyc8wt/coin.png';
    //you need to wait the load event in order to draw on canvas
function draw(){
    context= myCanvas.getContext('2d');
    context.clearRect(0,0,300,300);
    context.beginPath();
    context.save();//save the context
    context.translate(x,y);//move to x y position
    context.arc(0,0,30,0,Math.PI*2,true);
    context.clip();//clip the image inside the circle
    //draw the image inside the circle drawImage(image,-r,-r,d,d)
    context.drawImage(coin,-30,-30,60,60);
    context.restore(); //restore the context position to (0,0)
    if( x<0 || x>300)
    dx=-dx;
    if( y<0 || y>300)
        dy=-dy;
        x+=dx;
        y+=dy;
    }
setInterval(draw,10);

http://jsfiddle.net/6ymwy1ao/4/

实现web动画的背景图像

2 个答案: