一、绘制图片的方法
| drawImage(image,x,y) | 在canvas中(x,y)处绘制图片 |
|---|---|
| drawImage(image,x,y,width,height) | 在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度 |
| drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) | 从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。 |
canvas绘制图像有几个需要注意的地方
1、需要先实例化一个img对象，
2、通过img对象的src属性来引入外部图片
3、绘制图片语句必须在图片预加载完成后进行，不然有时候画不上去
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制图片</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="500">您的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img= new Image();
img.src = "caomei-003.jpg";
img.onload = function(){
//一、控制在画布上的位置
context.drawImage(img,0,0);
//二、控制在画布上位置+大小
// context.drawImage(img,0,0,400,200);
//三、裁剪（原图起点，宽高，目标图起点，宽高）
// context.drawImage(img,0,0,100,100,20,20,100,100);
}
</script>
</html>
二、像素
我们将图片画上去之后，可以利用上下文的getImageData()来获取指定区域的像素值，得到一个对象ImageData,ImageData有三个属性：width，height，data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制图片</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="500">您的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img= new Image();
img.src = "gui.jpg";
img.onload = function(){
context.drawImage(img,0,0);
//获取画布上所有像素点
var imageData = context.getImageData(0,0,800,500);
console.log(imageData)
context.putImageData(imageData,100,100);
}
</script>
</html>
图片.png
width和height表示访问像素区域大小
data是一个包含访问区域所有像素信息的属性
我们不仅可以获取像素，还可以绘制像素
绘制像素我们用putImageData(imageData,x,y);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制图片</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="500">您的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img= new Image();
img.src = "gui.jpg";
img.onload = function(){
context.drawImage(img,0,0);
//获取画布上所有像素点
var imageData = context.getImageData(0,0,800,500);
console.log(imageData)
//把获取的像素点重新放到画布上context.putImageData(imageData,100,100);
}
</script>
</html>
图片.png
三、灰度处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制图片</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="500">您的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img= new Image();
img.src = "gui.jpg";
img.onload = function(){
context.drawImage(img,0,0);
//获取画布上所有像素点
var imageData = context.getImageData(0,0,800,500);
console.log(imageData)
for(var i=0;i<imageData.data.length;i+=4){
var r = imageData.data[i];
var g = imageData.data[i+1];
var b = imageData.data[i+2];
var gray = (r+g+b)/3;
imageData.data[i] = gray;
imageData.data[i+1] =gray;
imageData.data[i+2] = gray;
}
//把改完的像素点重新放到画布上
context.putImageData(imageData,100,100);
}
</script>
</html>
图片.png
imageData.data.length是获取到的像素点的个数，根据我们的rgba取值，imageData.data[i]表示红色r，imageData.data[i+1]表示绿色g，imageData[i+2]表示蓝色b，imageData.data[i+3]表示透明度a，我们去r、g、b三者的平均值来得到灰色。
正如上面代码中的写法
我们再补充一个，大家知道怎么取颜色的反色吗？
反色就是将255-原来的rgb值，得到新的rgb值，就能得到反色，利用这种方法没我们也可以将图片进行反色处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制图片</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="500">您的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img= new Image();
img.src = "caomei-003.jpg";
img.onload = function(){
context.drawImage(img,0,0);
//获取画布上所有像素点
var imageData = context.getImageData(0,0,800,500);
console.log(imageData)
for(var i=0;i<imageData.data.length;i+=4){
var r = imageData.data[i];
var g = imageData.data[i+1];
var b = imageData.data[i+2];
imageData.data[i] = 255-r;
imageData.data[i+1] =255-g;
imageData.data[i+2] = 255-b;
}
// //把改完的像素点重新放到画布上
context.putImageData(imageData,100,100);
}
</script>
</html>
得到效果如图
图片.png
四、canvas 对图形的存储
1、canvas.toDataURL()方>法返回一个包含图片展示的所有信息，参数可忽略
2、如果画布的宽度或高度为0，那么返回字符串“data:,”
3、返回值以“data:image/png,base64”开头，说明该方法已经将图片转化为base64格式，返回值类型是string类型。
下面我写个测试，在点击按钮时会在画布上画一个一模一样的图形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="=400" height="400"></canvas>
<button onclick="sub()">点击</button>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "red";
context.fillRect(100,100,100,100);
console.log(canvas.toDataURL())
function sub(){
//将矩形变成图片
var base64 = canvas.toDataURL();
var img = new Image();
img.src = base64;
document.getElementsByTagName("body")[0].appendChild(img);
}
</script>
</html>
图片.png
打印出来的图片信息如下
图片.png
我们可以直接将该data信息复制到浏览器的地址栏打开
图片.png
网友评论