input的value值改變后,圖片不在畫布中心放大,怎么解決?
<script type="text/javascript">
?? ??? ??? ?var canvas = document.getElementById("canvas");
?? ??? ??? ?var context = canvas.getContext("2d");
?? ??? ??? ?var slider = document.getElementById("scale-range");
?? ??? ??? ?canvas.width = 800;
?? ??? ??? ?canvas.height = 543;
?? ??? ??? ?var scale = slider.value;
?? ??? ??? ?var image = new Image();
?? ??? ??? ?image.src = "../img/121.jpg";
?? ??? ??? ?image.onload = function() {
?? ??? ??? ??? ?drawImageByScale(scale);
?? ??? ??? ?}
?? ??? ??? ?function drawImageByScale(scale) {
?? ??? ??? ??? ?var imageWidth = canvas.width * scale;
?? ??? ??? ??? ?var imageHeight = canvas.height * 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>
2016-04-29
context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height );這句改成context.drawImage( image , sx , sy , canvas.width , canvas.height , sx , sy , canvas.width , canvas.height );