为什么我的调用第一种方法的drawImage()方法，什么也没有显示？？？（附上代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drawImage</title>
<style>
body{
background:black;
}
canvas{
margin:20px auto;
border:1px solid #aaa;
display:block;
}
input{
display:block;
margin:20px auto;
width:800px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input id="scale-range" type="range" min="0.5" max="3.0" step="0.01" value="3.0">
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
var slider = document.getElementById("scale-range");
window.onload = function () {
canvas.width = 245;
canvas.height = 200;
var scale = slider.value;
// console.log(document.documentElement.clientHeight+"\n"+
// alert(document.documentElement.clientHeight);
image.src = "img/8.jpg";
image.onload = function () {
// context.drawImage(image,0,0);
// context.drawImage(image,0,0,canvas.width,canvas.height);
drawImageByScale(scale);
}
function drawImageByScale(sclae){
var imageWidth = 245*scale;
var imageHeight = 200*scale;
var sx = imageWidth/2 - canvas.width/2;
var sy = imageHeight/2 - canvas.height/2;
context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height);
}
}
</script>
</body>
</html>
