今天遇到了两个棘手的问题,记录一下:
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#canvas {
display: block;
margin: 100px auto;
border: 5px black solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="1200" height="800">
您的浏览器不支持canvas,请升级。
</canvas>
</body>
<script>
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "../images/中午.jpg";
ctx.beginPath();
img.onload = function () {//必须要有
ctx.drawImage(img, 0, 0, 1200, 600);
}
ctx.clearRect(0,0,1200,800);//清除不了
ctx.beginPath();
</script>
</html>
第一个问题,为什么clearRect()清除不了drawImage()绘制出来的图片?
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#canvas {
display: block;
margin: 10px auto;
border: 2px black solid;
}
#canvasb {
display: block;
margin: 10px auto;
border: 2px rgb(241, 133, 192) solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500">
您的浏览器不支持canvas,请升级。
</canvas>
<canvas id="canvasb" width="800" height="500">
您的浏览器不支持canvas,请升级。
</canvas>
</body>
<script>
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var canvasb = document.querySelector("#canvasb");
var ctx = canvas.getContext('2d');
var ctxb = canvasb.getContext('2d');
var img = new Image();
img.src="../images/中午.jpg";
img.onload=function(){
ctx.drawImage(img,0,0,800,500);
}
var copyImag = ctx.getImageData(0,0,800,500);
//ctx.putImageData(copyImag,0,700);//为什么没有用
//控制取点间隔
let leap = 1;
for(var y =0;y<img.height;y+=leap){
for(var x = 0; x<img.width;x+=leap){
var index = x+y*img.width;//像素索引
//获取像素rgba
var r = copyImag.data[index*4+0];
var g = copyImag.data[index*4+1];
var b = copyImag.data[index*4+2];
var a = copyImag.data[index*4+3];
r=print(r/4);
g=print(g/4);
b=print(b/4); }
}
ctxb.putImageData(copyImag, 0, 0);
</script>
</html>
第二个问题为什么putImageData没有生效?
等我找到解决答案,在把它放到这篇博客