Question

我遇到了包含我的代码的障碍。我需要能够将随机大小的图像（任何东西）绘制到画布上，然后移动到＃34; mousemove＆＃34;。

这是我老师的一些示例代码，我为了让圈子随机出现而一起挑选，但我不想要圈子，我想要一个带有src的图像。

我觉得这应该是一个简单的调整？

var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
    var circleSize = 200;

canvas.addEventListener("mousemove", drawPumpkin);


function drawPumpkin(e){

    var loc = windowToCanvas(canvas, e.clientX, e.clientY);


    console.log("Mouse location: "+loc.y);
    context.beginPath();

    context.arc(loc.x,loc.y,randRange(5,40),0,Math.PI*2,false);

    context.fill();
    context.stroke();

    }

这是.html：

<DOCTYPE!>
<html>
    <head>
        <title>Pumpkin Emulator!</title>

        <style>
            body {
                background: #858585;
            }
            #canvas {
                margin: 10px;
                padding: 10px;
                background: #c5eaf0;
                border: thin inset #aaaaaa;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="600" height="300">
        Canvas not supported
        </canvas>

        <script src="script.js"></script>
    </body>
</html>    


    function windowToCanvas(canvas, x, y){

        var bbox = canvas.getBoundingClientRect();
        return {x: x - bbox.left * (canvas.width/bbox.width),
                y: y - bbox.top * (canvas.height/bbox.height)
               }
        }


    function randRange (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

Answer 1

易

创建图像

var myImage = new Image();   // creates an image element
myImage.src = "myimage.png"; // set image.src to the URL pointing to the image
// the image will now load and we will assume that there are no errors finding and loading the image. ie wrong / malformed URL.

现在用

替换drawPumpkin函数

function drawImage(e){
    var loc, imageSize;      // declare the variables you will use
    if(myImage.complete){    // check that the images has finished loading
        // get the location of the mouse on the canvas
        loc = windowToCanvas(canvas, e.clientX, e.clientY); 
        imageSize = randRange(5,40);      // get the size to draw the image
        loc.x -= imageSize/2;             // we want the image to be centered on the mouse
        loc.y -= imageSize/2;             // so offset the image by half the draw size
        // now draw the image
        context.drawImage(myImage,                  // the image to draw
                  0,0,myImage.width,myImage.height, // what part of the image to draw
                                                    // in this case all of the image
                  loc.x,loc.y,imageSize,imageSize   // where and how big it should be on the canvas
        );
    }
}

不要忘记将事件监听器更改为新功能。

就是这样。

Answer 2

jsFiddle：https://jsfiddle.net/CanvasCode/dLoh4fxf/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function windowToCanvas(canvas, x, y) {

    var bbox = c.getBoundingClientRect();
    return {
        x: x - bbox.left * (canvas.width / bbox.width),
        y: y - bbox.top * (canvas.height / bbox.height)
    }
}


function randRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawPumpkin(e) {

    var loc = windowToCanvas(c, e.clientX, e.clientY);


    console.log("Mouse location: " + loc.y);
    ctx.beginPath();

    ctx.drawImage(img, loc.x, loc.y);

}

var img = new Image();
img.src = "http://orig09.deviantart.net/314c/f/2011/218/7/2/nyan_cat_sprite_by_pincers1066-d45od59.jpg";

c.addEventListener("mousemove", drawPumpkin);
ctx.fillStyle = "#000";
ctx.fillRect(0,0,c.width,c.height);

您需要做的只是加载图片，然后使用context.drawImage绘制图片。

如何drawImage（）;使用＆＃34; mousemove＆＃34;反复进入画布。

2 个答案: