Javascript 如何绘制图像（）；使用“mousemove”在画布上重复
我的代码遇到了障碍。我需要能够在mousemove的画布上绘制任意大小的图像 这是我老师的一些示例代码，我收集了这些代码，以使圆圈随机出现，但我不想要圆圈，我想要一个带有src的图像 我觉得这应该是一个简单的调整Javascript 如何绘制图像（）；使用“mousemove”在画布上重复,javascript,image,canvas,window,Javascript,Image,Canvas,Window,我的代码遇到了障碍。我需要能够在mousemove的画布上绘制任意大小的图像 这是我老师的一些示例代码，我收集了这些代码，以使圆圈随机出现，但我不想要圆圈，我想要一个带有src的图像 我觉得这应该是一个简单的调整 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); var circleSize = 200; canvas.addEventListener("mousemov
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();
}
<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;
}
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.
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
);
}
}
您只需加载一幅图像，然后使用context.drawImage绘制即可。Hmmm…这些基本信息应该在您的教科书中-您看过了吗？；-可以使用DrawImageObject、x、y、width、height命令在画布上绘制各种尺寸的图像对象。图像源可以是：一个图像对象，另一个画布，一个视频元素。我确实花了相当多的时间阅读参考表，试图将所有内容拼凑在一起，还有一个小时左右，但是w3schools只提供了在a中填充img的示例，而且只有一次哈哈。我不知道去哪里找画布的例子，谷歌有时可能是一个无底洞……有启发性的链接：
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);