整个流程中所用到的主要Canvas API有：
绘制图像：drawImage()
获取图像数据：getImageData()
重写图像数据：putImageData()
导出图像：toDataURL()
1. 绘制图像
顾名思义，该方法就是用于将图像绘制于Canvas画布当中，具体用法有三种：
① 在画布上定位图像：
context.drawImage(img,x,y)
② 在画布上定位图像，并规定图像的宽度和高度（缩放）：
context.drawImage(img,x,y,width,height)
③ 剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
绘制图像.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
window.onload = function(){
canvas.width = 500;
canvas.height =300;
image.src = "./assets/dream.png";
image.onload = function(){//以下几种应用
//context.drawImage(image,0,0);
context.drawImage(image,0,0,canvas.width,canvas.height);
//context.drawImage(image,600,200,400,400,200,200,400,400);
// context.drawImage(image,600,200,400,400,0,0,canvas.width,canvas.height);
}
}
</script>
</body>
</html>
image.png
2.图像平铺
drawImage()方法实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
window.onload = function(){
canvas.width = 800;
canvas.height =500;
image.src = "./assets/dream.png";
image.onload = function(){
// 一定要写在onload回调中，否则看不到图片
//平铺比例
var scale=3;
//缩小后图像宽度
var n1=image.width/scale;
//缩小后图像高度
var n2=image.height/scale;
//平铺横向个数
var n3=canvas.width/n1;
//平铺纵向个数
var n4=canvas.height/n2;
for(var i=0;i<n3;i++){
for(var j=0;j<n4;j++){
context.drawImage(image,i*n1,j*n2,n1,n2)
}
}
}
}
</script>
</body>
</html>
效果：
image.png
createPattern()方法实现
createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
image.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script>
function draw(id) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "./assets/logo.png";
image.onload = function(){
//创建填充样式，全方位平铺
var ptrn = context.createPattern(image,'repeat');
context.rect(0,0,1500,800);
context.fillStyle = ptrn;
context.fill();
}
}
</script>
<body onload="draw('canvas');">
<canvas id="canvas" width="1500" height="800" />
</body>
</html>
效果：
image.png
3.图像剪裁
使用图形上下文不带参数的clip()方法来实现Canvas图形裁切功能，该方法会使用先创建好的路径对canvas设置裁剪区域，裁剪指定区域显示内容。裁剪是对画布进行的，裁剪后的画布是不能恢复到原来的大小，因此使用save及restore。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>裁剪区域</title>
<style>
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
//在屏幕上绘制一个大方块
context.fillStyle = "black";
context.fillRect(10,10,200,200);
context.save();
context.beginPath();
//裁剪画布从(0，0)点至(50，50)的正方形
context.rect(0,0,50,50);
context.clip();
//红色圆
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
context.arc(100,100,100,0,Math.PI * 2,false);
//整圆
context.stroke();
context.closePath();
context.restore();
};
</script>
</body>
</html>
效果：
image.png
4.像素处理
我们可以直接从HTML5 canvas中获取单个像素。通过ImageData对象我们可以以读写一个数据数组的方式来操纵像素数据。当完成像素操作之后，如果要显示它们，需要将这些像素复制到canvas上。
创建一个ImageData对象
var imageData = context.createImageData(width, height);
ImageData对象代表canvas中某个区域的底层像素数据。它包含三个只读的属性：
width：图像的宽度，单位像素。
height：图像的高度，单位像素。
data：包含像素值的一维数组。
在data数组中的每一个像素包含4个字节的值。也就是说每一个像素由4个字节表示，每一个字节分别表示红色，绿色，蓝色和一个透明度alpha通道（RGBA）。
复制像素到canvas上
var canvasX = 25;
var canvasY = 25;
context.putImageData(imageData, canvasX, canvasY);
putImageData()函数将它们复制到canvas上。putImageData()函数有两种格式。第一种格式是复制所有的像素到canvas中。canvasX和canvasY参数是canvas上插入像素的x和y坐标。
context.putImageData(imageData, canvasX, canvasY,
sx, sy, sWidth, sHeight);
sx和sy参数（sourceX 和 sourceY）是矩形左上角的x和y坐标。
sWidth和sHeight参数（sourceWidth 和 sourceHeight）是矩形的宽度和高度。
从canvas中获取像素
我们也可以从canvas上获取一个矩形区域的像素到一个ImageData对象中。通过getImageData函数可以完成这个操作。
var imageData2 = context.getImageData(x, y, width, height);
x和y参数是从canvas上获取的矩形的左上角的坐标。
width和height参数是从canvas上获取的矩形的宽度和高度。
5.绘制文字
我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。
绘制文字的字体由font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用fillStyle和strokeStyle属性来完成。
要在canvas上绘制文字，可以通过的fillText()函数或strokeText()函数来完成。
fillText(text, x, y, [maxWidth])
strokeText(text, x, y, [maxWidth])
表示在(x,y)的位置，绘制text的内容。可选参数maxWidth为文本的最大宽度，单位为像素。如果设置了该属性，当文本内容宽度超过该参数值，则会自动按比例缩小字体，使文本的内容全部可见；未超过时，则以实际宽度显示。如果未设置该属性，当文本内容宽度超过画布宽度时，超出的内容将被隐藏。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>裁剪区域</title>
</head>
<canvas id="canvas" width="1500" height="800" />
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "normal 36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.font = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5 Canvas Text", 50, 90);
</script>
</html>
效果：
image.png
网友评论