很奇怪，我的图片不能放大，也不能缩小
慕粉3462803
2016-08-08 13:43
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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"//图片地址
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)//创建一个新函数
}}}//图像初始的x.y坐标,画布的宽，高（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>
2回答
-
- 狐小鱼
- 2016-08-08 16:39:30
context.drawImage(img,0,0,60,60)}改成context.drawImage(img,0,0,imageWidth,imageHeight)
-
- 杜新明
- 2016-11-22 16:27:21
应该是改成
context.drawImage(img,0,0,60,60)}改成context.drawImage(img,dx,dy,imageWidth,imageHeight)
Canvas玩转图像处理
60311 学习 · 124 问题
相似问题