Javascript 无法使用缩放按钮操作图像 身体{ 边际：0px； 填充：0px； } #包装纸{ 位置：相对位置； 边框：1px实心#9C9898； 宽度：578px； 高度：200px； } #扣环{ 位置：绝对位置； 宽度：30px； 顶部：2个； 右：2px； } 输入[类型]= “按钮”]{ 填充物：5px； 宽度：30px； 保证金：0px 0px 2px 0px； } 功能图（比例、平移）{ var canvas=document.getElementById（“myCanvas”）； var context=canvas.getContext（“2d”）； var imageObj=新图像（）； imageObj.onload=函数（）{ 背景。drawImage（imageObj，69,50）； }; imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //透明帆布 clearRect（0，0，canvas.width，canvas.height）； context.save（）； context.translate（translatePos.x，translatePos.y）； 语境。尺度（尺度，尺度）； /*context.beginPath（）；//开始自定义形状 上下文。移动到（-119，-20）； 贝塞尔曲线图（-159,0，-159,50，-59,50）； 贝塞尔曲线图（-39,80,31,80,51,50）； 贝塞尔曲线图（131,50,131,20,101,0）； 贝塞尔曲线图（141，-60,81，-70,51，-50）； 贝塞尔曲线图（31，-95，-39，-80，-39，-50）； 贝塞尔曲线图（-89，-95，-139，-80，-119，-20）； context.closePath（）；//完成自定义形状 var grd=context.createLinearGradient（-59，-100,81,100）； grd.addColorStop（0，#8ED6FF）；//浅蓝色 grd.addColorStop（1，“#004CB3”）；//深蓝色 context.fillStyle=grd； context.fill（）； context.lineWidth=5； context.strokeStyle=“#0000ff”； stroke（）*/ restore（）； } window.onload=函数（）{ var canvas=document.getElementById（“myCanvas”）； 变量translatePos={ x:canvas.width/2， y:canvas.height/2 }; var标度=1.0； var scaleMultiplier=0.8； var startDragOffset={}； var mouseDown=false； //添加按钮事件侦听器 document.getElementById（“plus”）.addEventListener（“单击”，函数）（）{ scale/=scaleMultiplier； 绘制（缩放、平移）； }，假）； document.getElementById（“减号”）.addEventListener（“单击”，函数（）{ scale*=scaleMultiplier； 绘制（缩放、平移）； }，假）； //添加事件侦听器以处理屏幕拖动 canvas.addEventListener（“鼠标向下”，函数（evt）{ mouseDown=true； startDragOffset.x=evt.clientX-translatePos.x； startDragOffset.y=evt.clientY-translatePos.y； }); canvas.addEventListener（“鼠标”，函数（evt）{ mouseDown=false； }); canvas.addEventListener（“鼠标悬停”，函数（evt）{ mouseDown=false； }); canvas.addEventListener（“mouseout”，函数（evt）{ mouseDown=false； }); canvas.addEventListener（“mousemove”，函数（evt）{ 如果（鼠标向下）{ translatePos.x=evt.clientX-startDragOffset.x； translatePos.y=evt.clientY-startDragOffset.y； 绘制（缩放、平移）； } }); 绘制（缩放、平移）； }; jQuery（文档）.ready（函数（）{ $（“#包装器”）.mouseover（函数（e）{ $（'#status'）.html（e.pageX+，'+e.pageY）； }); }) 0, 0
上面的代码取自，只需复制所有代码就可以很好地工作。我的目标是保持一切不变，但使用图像，而不是根据上下文绘制的云形状。我尝试了Javascript 无法使用缩放按钮操作图像 身体{ 边际：0px； 填充：0px； } #包装纸{ 位置：相对位置； 边框：1px实心#9C9898； 宽度：578px； 高度：200px； } #扣环{ 位置：绝对位置； 宽度：30px； 顶部：2个； 右：2px； } 输入[类型]= “按钮”]{ 填充物：5px； 宽度：30px； 保证金：0px 0px 2px 0px； } 功能图（比例、平移）{ var canvas=document.getElementById（“myCanvas”）； var context=canvas.getContext（“2d”）； var imageObj=新图像（）； imageObj.onload=函数（）{ 背景。drawImage（imageObj，69,50）； }; imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //透明帆布 clearRect（0，0，canvas.width，canvas.height）； context.save（）； context.translate（translatePos.x，translatePos.y）； 语境。尺度（尺度，尺度）； /*context.beginPath（）；//开始自定义形状 上下文。移动到（-119，-20）； 贝塞尔曲线图（-159,0，-159,50，-59,50）； 贝塞尔曲线图（-39,80,31,80,51,50）； 贝塞尔曲线图（131,50,131,20,101,0）； 贝塞尔曲线图（141，-60,81，-70,51，-50）； 贝塞尔曲线图（31，-95，-39，-80，-39，-50）； 贝塞尔曲线图（-89，-95，-139，-80，-119，-20）； context.closePath（）；//完成自定义形状 var grd=context.createLinearGradient（-59，-100,81,100）； grd.addColorStop（0，#8ED6FF）；//浅蓝色 grd.addColorStop（1，“#004CB3”）；//深蓝色 context.fillStyle=grd； context.fill（）； context.lineWidth=5； context.strokeStyle=“#0000ff”； stroke（）*/ restore（）； } window.onload=函数（）{ var canvas=document.getElementById（“myCanvas”）； 变量translatePos={ x:canvas.width/2， y:canvas.height/2 }; var标度=1.0； var scaleMultiplier=0.8； var startDragOffset={}； var mouseDown=false； //添加按钮事件侦听器 document.getElementById（“plus”）.addEventListener（“单击”，函数）（）{ scale/=scaleMultiplier； 绘制（缩放、平移）； }，假）； document.getElementById（“减号”）.addEventListener（“单击”，函数（）{ scale*=scaleMultiplier； 绘制（缩放、平移）； }，假）； //添加事件侦听器以处理屏幕拖动 canvas.addEventListener（“鼠标向下”，函数（evt）{ mouseDown=true； startDragOffset.x=evt.clientX-translatePos.x； startDragOffset.y=evt.clientY-translatePos.y； }); canvas.addEventListener（“鼠标”，函数（evt）{ mouseDown=false； }); canvas.addEventListener（“鼠标悬停”，函数（evt）{ mouseDown=false； }); canvas.addEventListener（“mouseout”，函数（evt）{ mouseDown=false； }); canvas.addEventListener（“mousemove”，函数（evt）{ 如果（鼠标向下）{ translatePos.x=evt.clientX-startDragOffset.x； translatePos.y=evt.clientY-startDragOffset.y； 绘制（缩放、平移）； } }); 绘制（缩放、平移）； }; jQuery（文档）.ready（函数（）{ $（“#包装器”）.mouseover（函数（e）{ $（'#status'）.html（e.pageX+，'+e.pageY）； }); }) 0, 0,javascript,html,canvas,Javascript,Html,Canvas,上面的代码取自，只需复制所有代码就可以很好地工作。我的目标是保持一切不变，但使用图像，而不是根据上下文绘制的云形状。我尝试了drawImage方法并成功地绘制了图像，但我无法放大/缩小，甚至无法再拖动。我可以知道context有什么问题吗？好的，现在代码中发生的事情是在调用还原调用后绘制图像，结果什么也没有发生 这是因为图像加载是异步的 您需要做的是集成图像加载，使其在管线中提前完成，然后使用在缩放中集成的图像，例如，通过将图像加载从draw功能中取出： <!DOCTYPE HTML>
drawImagecontextdraw<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
border: 1px solid #9C9898;
width: 578px;
height: 200px;
}
#buttonWrapper {
position: absolute;
width: 30px;
top: 2px;
right: 2px;
}
input[type =
"button"] {
padding: 5px;
width: 30px;
margin: 0px 0px 2px 0px;
}
</style>
<script>
function draw(scale, translatePos){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(translatePos.x, translatePos.y);
context.scale(scale, scale);
/*context.beginPath(); // begin custom shape
context.moveTo(-119, -20);
context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
context.bezierCurveTo(-39, 80, 31, 80, 51, 50);
context.bezierCurveTo(131, 50, 131, 20, 101, 0);
context.bezierCurveTo(141, -60, 81, -70, 51, -50);
context.bezierCurveTo(31, -95, -39, -80, -39, -50);
context.bezierCurveTo(-89, -95, -139, -80, -119, -20);
context.closePath(); // complete custom shape
var grd = context.createLinearGradient(-59, -100, 81, 100);
grd.addColorStop(0, "#8ED6FF"); // light blue
grd.addColorStop(1, "#004CB3"); // dark blue
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#0000ff";
context.stroke();*/
context.restore();
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var translatePos = {
x: canvas.width / 2,
y: canvas.height / 2
};
var scale = 1.0;
var scaleMultiplier = 0.8;
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
scale /= scaleMultiplier;
draw(scale, translatePos);
}, false);
document.getElementById("minus").addEventListener("click", function(){
scale *= scaleMultiplier;
draw(scale, translatePos);
}, false);
// add event listeners to handle screen drag
canvas.addEventListener("mousedown", function(evt){
mouseDown = true;
startDragOffset.x = evt.clientX - translatePos.x;
startDragOffset.y = evt.clientY - translatePos.y;
});
canvas.addEventListener("mouseup", function(evt){
mouseDown = false;
});
canvas.addEventListener("mouseover", function(evt){
mouseDown = false;
});
canvas.addEventListener("mouseout", function(evt){
mouseDown = false;
});
canvas.addEventListener("mousemove", function(evt){
if (mouseDown) {
translatePos.x = evt.clientX - startDragOffset.x;
translatePos.y = evt.clientY - startDragOffset.y;
draw(scale, translatePos);
}
});
draw(scale, translatePos);
};
jQuery(document).ready(function(){
$("#wrapper").mouseover(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
})
</script>
</head>
<body onmousedown="return false;">
<div id="wrapper">
<canvas id="myCanvas" width="578" height="200">
</canvas>
<div id="buttonWrapper">
<input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
</div>
</div>
<h2 id="status">
0, 0
</h2>
</body>
</html>
draw（）您是否可以/相反地显示您遇到问题的代码？上面的代码，如果有效的话，从这个例子来看，不能帮助我们跟踪代码中的错误：-）@Ken AbdiasSoftware:实际上，图像和云的代码都在那里，只需对其中一个进行注释即可。无论如何，我已经注释掉了云并显示了图像。希望能有帮助，谢谢。虚惊一场，只是我失明了。谢谢8-）
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
/// now the image has loaded, now we can scale it
draw();
};
imageObj.src = 'image-url';
function draw() {
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(translatePos.x, translatePos.y);
context.scale(scale, scale);
/// draw image here
context.drawImage(imageObj, 69, 50);
context.restore();
}