                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas玩转图像处理

我哪里写错了，为什么没有铺满整个canvas

<body>

<canvas id="canvas"></canvas>
<input id="range" type="range" step="0.01" min="0.5" max="3" value="2" />

<script>

window.onload = function(){
var canvas = document.getElementById('canvas');
var slide = document.getElementById('range');
var ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 252;

var scale = slide.value;
var img = new Image();
img.src = 'img/img3.jpg';

img.onload = function(){
drawImgByScale(scale);
};

function drawImgByScale(scale){

var iWidth = 400*scale;
var iHeight = 252*scale;

var sx = iWidth/2 - canvas.width/2;
var sy = iHeight/2 - canvas.height/2;

ctx.drawImage(img,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height);
}
}

</script>
</body>

猴子也救不了我

2015-12-03

源自：Canvas玩转图像处理 2-3

关注问题我要回答

4117

操作

收起

5 回答

慕九州5344597
2016-08-05

老师的的算法有问题，之所以他这个能实现，我想是图片分辨率足够大，换一个分辨率小的就不行了你可以用这个试试

function drawImageByScale(){

var imgW = cwidth/scale;

var imgH = cheight/scale;

var sx = cwidth/2-imgW/2;

var sy = cheight/2-imgH/2;

cxt.drawImage(bgimg,sx,sy,cwidth/scale,cheight/scale,0,0,cwidth,cheight);

}

0 回复有任何疑惑可以回复我~

收起回答

yanan_luo
2016-04-25

可能是你用的老师之前的那张照片吧清晰度比较低不能再放大了你换一张清晰度高点的就可以了

0 回复有任何疑惑可以回复我~

收起回答

再见就是再也不见0
2016-02-04

window.onload=function(){

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

var image=new Image();

var ran=document.getElementById('scale-range');

canvas.width=1152;

canvas.height=768;

image.src="img.jpg";

image.onload=function(){

//context.drawImage(image,0,0)

var slider=ran.value;

drawImageScale(slider)

}

function drawImageScale(slider){

var imgWidth=1152*slider;

var imgHeight=768*slider;

var sx=imgWidth / 2-canvas.width / 2;

var sy=imgHeight / 2-canvas.height / 2;

context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 ,canvas.width , canvas.height)

}

</script>

<body>

<canvas id="canvas" style="border:#000 1px solid;display:block;margin:0 auto;">您浏览器版本太低</canvas>

</body>

为啥不能占满整个屏幕呢？

0 回复有任何疑惑可以回复我~

收起回答

木子舟义
2015-12-03

<body>

window.onload = function(){

var canvas = document.getElementById('canvas');

var slide = document.getElementById('range');

var ctx = canvas.getContext('2d');

canvas.width = 400;

canvas.height = 252;

var img = new Image();

img.src = '1.jpg';

img.onload = function(){

drawImgByScale(scale);}

slide.onmousemove = function(){

drawImgByScale(slide.value);

};

function drawImgByScale(scale){

var iWidth = 400*scale;

var iHeight = 252*scale;

var sx = iWidth/2 - canvas.width/2;

var sy = iHeight/2 - canvas.height/2;

ctx.drawImage(img,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height);

}

</script>

</body>

代码改成这样会跟着滚动条动

drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img是需要绘制的图片,sx,xy是需要绘制的图片上的起点，而不是在canvas画布上的起点

swidth,sheight,是需要绘制图片的宽度和高度

x,y指的是要把绘制的图片放在画布的什么位置

width和height 图片总的大小

0 回复有任何疑惑可以回复我~

收起回答

猴子也救不了我提问者

我不知道我哪里写错了，截出来的图片没有平铺整个canvas

2015-12-03 回复有任何疑惑可以回复我~

木子舟义回复猴子也救不了我提问者

因为照你写的这个代码根本就没有这个功能。

2015-12-03 回复有任何疑惑可以回复我~

0/150

提交

取消

Canvas玩转图像处理

参与学习 60311 人
解答问题 124 个

canvas系列第三课，学会编写图像算法，一起玩转图像处理吧

进入课程

本课相似问答

1 回答我的图片为啥不能自动填满整个画布？当我把canvas的dh参数设置成1200的时候就自动填满了。。

1 回答有个疑问，canvas处理图片在实际中有什么用途？

1 回答老师，离屏canvas有一个问题请教

1 回答canvas拖拽

6 回答getImageData 报错了，说CanvasRenderingContext2D没有这个方法，

搜索更多本课相关问答

我哪里写错了，为什么没有铺满整个canvas

我要回答关注问题

热搜

最近搜索清空

我哪里写错了，为什么没有铺满整个canvas

5 回答

本课相似问答

我哪里写错了，为什么没有铺满整个canvas