很奇怪，我的圖片不能放大，也不能縮小
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>body{background:#92787A;}</style>
</head>
<body>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #E31E21;"></canvas>
<input type="range" min="0.5" max="3.0" step="0.01" value="1.0" id="scale-range" style="display:block;margin:20px auto;width:800px;">
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var slider=document.getElementById("scale-range");
var img=new Image();
window.onload=function(){
canvas.width=60
canvas.height=60
var scale=slider.value
img.src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1295276964,880279267&fm=58&s=3377E832C644AB01268BDBBB0300502D"http://圖片地址
img.onload=function(){//圖片加載
//context.drawImage(img,0,0)
//context.drawImage(img,-16,-5,90,70)
drawImageByScale(scale)
slider.onmousemove=function(){
scale=slider.value
drawImageByScale(scale)//創(chuàng)建一個(gè)新函數(shù)
}}}//圖像初始的x.y坐標(biāo),畫布的寬，高（context.drawImage(img,dx,dy,dw,dh））
function drawImageByScale(scale){
var imageWidth=60*scale
var imageHeight=60*scale
var ? dx=canvas.width/2-imageWidth/2
var ? dy=canvas.height/2-imageHeight/2
context.clearRect(0,0,60,60)
context.drawImage(img,0,0,60,60)}
</script>
</body>
</html>
2016-08-08
context.drawImage(img,0,0,60,60)}改成context.drawImage(img,0,0,imageWidth,imageHeight)
2016-11-22
應(yīng)該是改成