首页 > 代码库 > JavaScript之Canvas画布
JavaScript之Canvas画布
canvas可以在页面中设定一个区域，再利用JavaScript动态地绘制图像。
基本用法
使用canvas元素，首先设置width和height属性，为其设置绘制区域的大小， 如果没有设置宽度和高度，是看不到元素的，不能在其区域画图，在开始标签和结束标签之间的信息是后备信息，当用户的浏览器不支持canvas元素时会显示，用于友好地提示用户。
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
第一步：想要在canvas区域里画图，第一步需要取得绘图上下文，而取得上下文对象的引用，需要调用getContext()方法，并传入上下文参数"2d"，这样就能取得2D上下文对象。
注：在调用getContext()方法，需要检测浏览器是否支持该方法。传入的参数‘2d‘，需要用单引用括起来。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext(‘2d‘); //2d用单引用括起来
}
</script>
</body>
使用toDataURL()方法，可导出绘制的图像。该方法可以获取绘制的图像的数据URL。并可以将该URL赋值给一个img元素，这样在页面中可以显示用canvas绘制的图像了。
格式：canvas.toDateURL("image/png");
注：浏览器默认将图像编码成png格式（除非另行指定）。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript之Canvas</title> </head> <body> <canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas> <script> var canvas = document.getElementById("canvas"); //检测浏览器是否支持canvas 该方法是否存在 取得上下文对象 if (canvas.getContext) { var context = canvas.getContext(‘2d‘); //2d用单引用括起来 //获取图像的数据URL var imgURL = canvas.toDataURL("image/png"); //默认图片格式为png，也可以自定义设置格式。 //显示图片 var image = document.createElement("img"); //添加一个img元素 image.src = http://www.mamicode.com/imgURL; //将获取的图像的URL赋值给src属性"white-space:pre"> </script> </body> </html>
在页面中的代码大概是这样的了：
这样在页面中有了个img标签用于显示canvas绘制出的图像、
2D上下文
2D上下文的坐标起始于canvas的左上角，起始坐标为(0, 0)，所有坐标值基于这个坐标原点计算，x越大越向右，越大越向下。
绘制2D图像将进行三步：
1、取得上下文对象（getContext("2d")）。
2、指定填充(fiiStyle)或描边(strokeStyle)颜色。描边的话还可以其线条末端的形状、线条相交的方式。
3、指定是填充绘制矩形(fiiRect())还是描边绘制矩形(strokeRect())。
填充和描边
第二步：
2D上下文的基本的绘图方式有两种：填充和描边。顾名思义，填充就是用指定的颜色来填充图形，描边，就是绘制边缘。这两种方法分别为：fillStyle和strokeStyle。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript之Canvas</title>
</head>
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext(‘2d‘); //2d用单引用括起来
if (canvas.getContext) {
var context = canvas.getContext("2d"); //2d用单引用括起来
context.fillStyle = "red"; // 填充颜色为红色
context.strokeStyle = "blue"; //描边颜色为蓝色
}
}
</script>
</body>
</html>当然，像上面的代码还不能绘制图形，这样只能说取得上下文对象、选择好了填充颜色、选择好了描边颜色而已，接下来就是绘制图形了。
绘制矩形
第三步：与绘制矩形有关的方法有：fillRect()、strokeRect()、clearRect()。它们分别接收三个参数：第一个参数表示矩形的x坐标、第二个参数表示矩形的y坐标，第三个参数表示矩形的宽度、第四个参数表示矩形的高度。
fillRect()表示用指定的填充颜色绘制矩形：
- lineWidth：表示描边线的宽度
- lineCap：用于控制线条末端的形状是平头(butt)、圆头(round)、方头(square)。
- lineJoin：用于控制线条相交的方式，圆交(round)、斜交(bevel)、斜接(miter)。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.fillStyle = "red"; // 指定填充颜色为红色
context.fillRect(10, 10, 150, 150); //用指定的颜色填充矩形
}
</script>
</body>
效果：
可以看出：红色矩形离canva区域左边10px，离上边10px。大小为150x150。
strokeRect()表示用指定的描边颜色描边绘制出矩形。
- lineWidth：表示描边线的宽度
- lineCap：用于控制线条末端的形状是平头(butt)、圆头(round)、方头(square)。
- lineJoin：用于控制线条相交的方式，圆交(round)、斜交(bevel)、斜接(miter)。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d"); //2d用单引用括起来
context.strokeStyoe = "yellow"; // 描边颜色为蓝色
context.lineWidth = 4; //指定描边线的宽度
context.strokeRect(50, 50, 120, 120); //用指定的颜色描边矩形
}
</script>
</body>效果：
当然，填充和描边可以一起使用来绘制矩形：当填充矩形和描边矩形的坐标一样时
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d"); //2d用单引用括起来
//描边矩形
context.strokeStyoe = "yellow"; // 描边颜色为蓝色
context.lineWidth = 4; //指定描边线的宽度
context.strokeRect(50, 50, 120, 120); //用指定的颜色描边矩形
//填充矩形
context.fillStyle = "red";
context.fillRect(50, 50, 120, 120);
}
</script>
</body>效果：
当填充矩形和描边矩形的坐标不一样时，
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d"); //2d用单引用括起来
//描边矩形
context.strokeStyoe = "yellow"; // 描边颜色为蓝色
context.lineWidth = 4; //指定描边线的宽度
context.strokeRect(50, 50, 120, 120); //用指定的颜色描边矩形
//填充矩形
context.fillStyle = "red";
context.fillRect(150, 150, 120, 120);
}
</script>
</body>效果
注：当指定的填充颜色或指定的描边颜色用“rgba()”形式表示时，可以用于绘制透明形的矩形。
clearRcet()方法可以用于清除canvas区域内的矩形，当然也可以用于消除一部分，生成有意思的形状。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d"); //2d用单引用括起来
//描边矩形
context.strokeStyoe = "yellow"; // 描边颜色为蓝色
context.lineWidth = 4; //指定描边线的宽度
context.strokeRect(50, 50, 120, 120); //用指定的颜色描边矩形
//填充矩形
context.fillStyle = "red";
context.fillRect(150, 150, 120, 120);
//消除指定大小的区域
context.clearRect(110, 110, 30, 30);
}
</script>
</body>
效果：
绘制路径
绘制路径一般是绘制圆形或者圆弧。
beginPath()：表示开始绘制新路径。
closePath()：表示关闭绘制路径。
可以通过以下方法绘制路径：var canvas = document.getElementById("canvas"); var context = canvas.getContent("2d");
context.arc(x, y, r, sa, ea, c)：表示以(x, y)为圆心，画一个以r为半径，起始角度为sa，结束角度为ea的圆，c表示是否逆时针，默认为true，false表示顺时针。
其中，fill()表示以填充方式绘制圆，stroke()表示以描边方式绘制圆。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
//开始绘制新路径
context.beginPath();
context.arc(50, 50, 40, 0, 2*Math.PI, false);
context.closePath(); //关闭路径
context.fillStyle = "red";
//以填充方式绘制圆
context.fill();
}
</script>
</body>效果：
context.artTo(x1, y1, x2, y2, r)：表示从上一点开始绘制一条半径为r的弧线，结束坐标为(x2, y2)，并且经过(x1, y1)这个坐标。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
//开始绘制新路径
context.beginPath();
context.beginPath();
context.moveTo(100, 100); //绘制起点
context.arcTo(50, 50, 10, 200, 200);
context.closePath();
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>效果：
以(100, 100)为起点，画一条经过(50, 50)和(200, 200)的圆弧。
context.moveTo(x, y)：将绘图起点移动到(x, y)，不画线。也就是绘制图形的起点坐标。
context.lineTo(x, y)：从上一点绘制一条直线，到(x, y)为止。画线的终点坐标。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
//开始绘制新路径
context.beginPath();
context.moveTo(30, 30); //画线的起点
context.lineTo(200, 200); //终点
context.closePath();
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>
效果：
画一条从起点(30, 30)到终点(200, 200)的直线。
rect(x, y, width, height)：从(x, y)为起始点，画一个矩形，此矩形为一条路径，不是一个独立的形状。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
//开始绘制新路径
context.beginPath();
context.arce(20, 20, 200, 200);
context.closePath();
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>效果：
注：这个矩形是路径，不是strokeRect()画的独立的形状。
绘制路径小知识：
如果想画一条连接到起点的路径，可以使用closePath()，即将路径画成一个回路。如果想填充绘制，用fillStyle()和fill()方法，如果相描边绘制，用strokeStyle()和stroke()方法。
绘制文本
图形与文本问题如影随形。绘制文本的方法有两个：fillText()和strokeText。
字面意思就是：填充绘制文本和描边绘制文本。
fillText方法使用fillStyle属性绘制文本，strokeText()方法使用strokeStyle属性绘制文本。
这两个方法接收四个参数：第一个参数是要绘制的文本内容，第二个参数是x坐标，第三个参数是y坐标，以及最大像素宽度。
两个方法均以下3个属性为基础：
contxt.font：字体样式、大小、字体。
context.textAlign：对齐方式（start、center、end）,相当于向左、中间、向右对齐。
context.textBaseline：文本基线。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "bold 26px"; //字体样式
context.textAlign = "statr"; //对齐方式为左对齐
context.textBaseline = "top"; //基线
context.fillText("你好", 100, 100, 200);
}
</script>
</body>
效果：
这是要注意：如果"textAlign"设置为"start"，则x表示文本左端的位置（从左向右阅读），如果"textAlign"设置为"end"，则x表示文本右凋的位置（从右向左阅读）。
变换
通过上下文的变换，可以将处理后的图像绘制到画布上。创建绘制上下文时，会初始化变换矩阵，所有处理按描述直接处理。
变换的几种方式：
1、rotate(angle)：旋转图像angle角度。注：角度不能带单位。
2、scale(scaleX, scaleY)：缩放图像。在x方向乘以scaleX，在y轴方向上乘以scaleY。
3、translate(x, y)：将坐标原点移动到(x,y)的位置。也就是说原来的(0, 0)位置变成现在的(x, y)位置。
4、transform(a, b, c, d, e, f)：直接修改矩阵。矩阵的算法：
a c e x
b d f * y
0 0 0 0
5、setTransform(a, b, c, d, e, f)：将矩阵重置为默认状态，然后再调用矩阵。
6、skew(x, y)：将画布拉伸
以下画一个钟表为例：
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.beginPath();
//绘制外圆
context.arc(100, 100, 99, 0, 2*Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2*Math.PI, false);
context.translate(100, 100); //变换原点，为后面绘制时针、分针做准备
//绘制分针
context.moveTo(0, 0); //绘制直线的起点
context.lineTo(0, -85); //至直线的终点
//绘制时针
context.moveTo(0, 0);
context.lineTo(-65, 0);
//描边绘制钟表
context.stroke();
}
</script>
</body>效果：
把原点变换到钟表的中心处，这样原点就还在画布的左上角了，而是在钟表的中心处，数学计算是基于(0, 0)计算的，而不是(100, 100)。还可以进一步，将钟表旋转90度等。
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.beginPath();
//绘制外圆
context.arc(100, 100, 99, 0, 2*Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2*Math.PI, false);
context.translate(100, 100); //变换原点，为后面绘制时针、分针做准备
context.rotate(90); //不用像HTML中的变换一样带单位
//绘制分针
context.moveTo(0, 0); //绘制直线的起点
context.lineTo(0, -85); //至直线的终点
//绘制时针
context.moveTo(0, 0);
context.lineTo(-65, 0);
//描边绘制钟表
context.stroke();
}
</script>
</body>效果：
因为原点已经到了钟表的中心处，所以旋转是基于该中心为原点旋转的。就像是钟表被固定在墙上，然后被旋转90角一样。
sava()方法和restore()方法可以跟踪上下文的状态变化，如果你想要返回某种属性和状态的组合，可以使用save()方法，也就是说该方法可以保存你先前设置的上下文的属性和状态，该方法将先前你设置的属性和状态推入一个栈结构，等到你想要用保存的属性和状态后，就使用restore()方法，在保存设置的栈结构后 返回一级，如果连续使用save()方法，可以将多个属性和状态的组合保存在栈结构中，此时再使用restore()方法一级一级向上返回。
设置一次属性和状态，就用save()方法保存一次。这样用restore()方法就可以逐级追溯到每次设置的属性和状态。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript之Canvas</title>
</head>
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.fillStyle = "blue"; //先将fillStyle设置为蓝色
context.save(); //保存此时的属性
context.fillStyle = "yellow"; //再将fillStyle设置为黄色
context.translate(100, 100); //变换，将原点设置到(100, 100)这个位置
context.save(); //再保存此时的属性
context.fillStyle = "red"; // 将fillStyle设置为红色
context.save();
//第一次restore()，此时将矩形绘制为红色，且原点(0, 0)的实际坐标为(100, 100)
context.restore();
//第二次restore()，此时将矩形绘制为黄色，且原点(0, 0)的实际坐标为(100, 100)
context.restore();
//第三次restore(); 此时将矩形绘制为蓝色，这是最上级设置的属性，且此时的原点(0, 0)的实际坐标为(0, 0)
context.restore();
context.fillRect(50, 50, 300, 300, false);
}
</script>
</body>
</html>最终效果：
先将fillStyle设置为蓝色，将用save()保存此时的属性，再将fillStyle设置为黄色，将变换原点的坐标，再次将此时的属性保存，最后再次设置fillStyle的属性为红色将保存。
然后多次使用restore()方法逐级向上返回：
第一次restore()，即追溯到fillStyle属性为红色，此时原点的位置在(100, 100)。
第二次restore()，即追溯到fillStyle属性为黄色，此时原点的位置在(100, 100)。
最后一次restore()，追溯到最初的fillStyle的属性即为蓝色，此时没有变换原点(0, 0)的位置，依然在(0, 0)处。
这也是代码执行后的最终效果。
注：save()方法只能保存设置的属性和变换，不能保存绘制上下文的内容。
阴影
根据以下属性，可以自定义为矩形或者路径添加阴影。
1、context.showColor：为阴影添加颜色。
2、context.showOffsetX：为阴影添加x轴方向上的偏移量。
3、context.showOffsetY：为阴影添加y轴方向上的偏移量。
3、context.showBlur：为阴影添加模糊程度。
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
//设置阴影的属性
context.shadowOffsetX = 10;
context.shadowOffsetY = 20;
context.shadowBlur = 2;
context.shadowColor = "blue";
//绘制矩形
context.fillStyle = "red";
context.fillRect(10, 10, 109, 109);
}
</script>
</body>效果：
这里为红色矩形设置了一个蓝色阴影。注：设置阴影属性的代码要在绘制矩形的代码之前，不然就不会绘制出阴影。
渐变
在canvas画布中使用渐变，需要用一个矩形作为参照来显示这个渐变效果，如线性渐变、径向渐变等都需要绘制一个矩形来显示渐变效果。
线性渐变 （createLinearGradient）
在canvas中使用渐变，首先可以通过createLinearGradient()方法一创建一个 线性渐变对象，它接收四个参数，分别为：渐变起始位的x、y坐标，渐变结束位的x、y坐标。这样就能创建一个指定大小的渐变。
然后在创建渐变对象后，使用addColorStop()方法来指定色标（渐变颜色），它接收两个参数：色标位置和css颜色值，色标位置是0（开始的颜色）和1（结束的颜色）之间的数值组成。
最后将fillStyle或者strokeStyle设置为这个渐变对象即可（将渐变对象赋值给它们）。
为了让渐变覆盖整个矩形，需要将矩形的坐标与渐变的坐标相匹配（不一定相等），这个显示的渐变区域不只能矩形的一小部分了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript之Canvas</title>
</head>
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
//定义一个渐变对象
var gradient = context.createLinearGradient(30, 30, 200, 200);
//为这个对象设置渐变颜色
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
//绘制一个矩形作为参考
context.fillStyle = "orange";
context.fillRect(20, 20, 200, 200);
//把fillStyle或者strokeStyle设置为这个渐变对象
context.fillStyle = gradient;
context.fillRect(30, 30, 200, 200);
}
</script>
</body>
</html>效果：
可以看出，绘制了两个矩形，其中一个矩形就是一个参照，而另一个矩形则用来显示渐变效果而绘制的。
径向渐变（createRadialGradient）
使用createRadialGradient()方法来创建渐变对象，该方法接收6个参数，分别是起始圆的x、y坐标和半径。结束圆的x、y坐标和半径。
其中，如果一个圆比另一个圆大，那么就是一个圆锥形状的渐变。
如果想让渐变从圆的中心扩散，可以将其设置为一个同心圆即圆心坐标相同，而半径不同。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript之Canvas</title>
</head>
<body>
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<script>
var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");
//定义一个径向渐变对象
var gradient = context.createRadialGradient(57, 57, 10, 57, 57, 30);
//为这个对象设置渐变颜色
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "blue"); //结束颜色也就是矩形的颜色
//把fillStyle或者strokeStyle设置为这个渐变对象
context.fillStyle = gradient;
context.fillRect(10, 10, 100, 100);
}
</script>
</body>
</html>效果：
JavaScript之Canvas画布
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。