為什么我的調(diào)用第一種方法的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>
2016-11-22
好的，謝謝。
2016-11-22
如果你圖片的原始尺寸是245*200
計算出的sx和sy都超出了圖片本身，不會繪制到畫布上的
2016-11-22
你看一下8.jpg圖片寬度和高度，還有sx和sy計算得到的值，如果圖片的值小于sx和sy的值是不會顯示的