JS之使用Canvas绘图

作者: LemonnYan | 来源:发表于2018-08-28 14:37 被阅读924次

<canvas> 元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。

一、基本用法

要使用 <canvas> 元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持 <canvas> 元素，就会显示这些信息。

<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>

如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。

要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext() 方法并传入上下文的名字。传入 "2d" ，就可以取得 2D 上下文对象。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.getContext("2d"); 
}

使用 toDataURL() 方法，可以导出在 <canvas> 元素上绘制的图像。这个方法接受一个参数，即图像的 MIME 类型格式，而且适合用于创建图像的任何上下文。

取得画布中的一幅 PNG 格式的图像：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    // 取得图像的数据 URI
    var imgURI = drawing.toDataURL("image/png");
    // 显示图像
    var image = document.createElement("img");
    image.src = imgURI;
    document.body.appendChild(image);
}

如果绘制到画布上的图像源自不同的域， toDataURL() 方法会抛出错误。

二、2D上下文

使用 2D 绘图上下文提供的方法，可以绘制简单的 2D 图形，比如矩形、弧线和路径。2D 上下文的坐标开始于 <canvas> 元素的左上角，原点坐标是(0,0)。

1、填充和描边

2D 上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数 2D 上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性： fillStyle 和 strokeStyle 。

这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是 "#000000" 。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式，包括颜色名、十六进制码、rgb 、 rgba 、 hsl 或 hsla 。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.strokeStyle = "red";
    context.fillStyle = "#0000ff";
}

2、绘制矩形

与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.getContext("2d"); 
    // 绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10, 10, 50, 50);
    // 绘制半透明的蓝色矩形
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30, 30, 50, 50);
}

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过 strokeStyle 属性指定。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.getContext("2d"); 
    context.strokeStyle = "#ff0000";
    context.strokeRect(10, 10, 50, 50);
    // 绘制半透明的蓝色描边矩形
    context.strokeStyle = "rgba(0,0,255,0.5)";
    context.strokeRect(30, 30, 50, 50);
}

描边线条的宽度由 lineWidth 属性控制，该属性的值可以是任意整数。另外，通过 lineCap 属性可以控制线条末端的形状是平头、圆头还是方头（ "butt" 、"round" 或 "square" ），通过 lineJoin 属性可以控制线条相交的方式是圆交、斜交还是斜接（ "round" 、 "bevel" 或 "miter" ）。

clearRect() 方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10, 10, 50, 50);
    //绘制半透明的蓝色矩形
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30, 30, 50, 50);
    // 在两个矩形重叠的地方清除一个小矩形
    context.clearRect(40, 40, 10, 10);
}

3、绘制路径

通过路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用 beginPath() 方法，表示要开始绘制新路径。然后，再通过调用下列方法来实际地绘制路径。

arc(x, y, radius, startAngle, endAngle, counterclockwise) ：以 (x,y) 为圆心绘制一条弧线，弧线半径为 radius ，起始和结束角度（用弧度表示）分别为 startAngle 和endAngle 。最后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算，值为 false表示按顺时针方向计算。

arcTo(x1, y1, x2, y2, radius) ：从上一点开始绘制一条弧线，到 (x2,y2) 为止，并且以给定的半径 radius 穿过 (x1,y1) 。

bezierCurveTo(c1x, c1y, c2x, c2y, x, y) ：从上一点开始绘制一条曲线，到 (x,y) 为止，并且以 (c1x,c1y) 和 (c2x,c2y) 为控制点。

lineTo(x, y) ：从上一点开始绘制一条直线，到 (x,y) 为止。

moveTo(x, y) ：将绘图游标移动到 (x,y) ，不画线。

quadraticCurveTo(cx, cy, x, y) ：从上一点开始绘制一条二次曲线，到 (x,y) 为止，并且以 (cx,cy) 作为控制点。

rect(x, y, width, height) ：从点 (x,y) 开始绘制一个矩形，宽度和高度分别由 width 和height 指定。这个方法绘制的是矩形路径，而不是strokeRect() 和 fillRect() 所绘制的独立的形状。

如果想绘制一条连接到路径起点的线条，可以调用closePath() 。如果路径已经完成，你想用 fillStyle 填充它，可以调用 fill() 方法。另外，还可以调用 stroke() 方法对路径描边，描边使用的是 strokeStyle 。最后还可以调用 clip() ，这个方法可以在路径上创建一个剪切区域。

绘制一个不带数字的时钟表盘：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.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.moveTo(100, 100);
    context.lineTo(100, 15);
    // 绘制时针
    context.moveTo(100, 100);
    context.lineTo(35, 100);
    // 描边路径
    context.stroke();
}

isPointInPath() 方法接收 x 和 y 坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上。

if (context.isPointInPath(100, 100)){
    alert("Point (100, 100) is in the path.");
}

4、绘制文本

绘制文本主要有两个方法： fillText() 和 strokeText() 。这两个方法都可以接收 4 个参数：要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。

两个方法都以下列 3 个属性为基础：

font ：表示文本样式、大小及字体，用 CSS 中指定字体的格式来指定，例如 "10px Arial" 。

textAlign ：表示文本对齐方式。可能的值有 "start" 、 "end" 、 "left" 、 "right" 和 "center" 。建议使用 "start" 和 "end" ，不要使用 "left" 和 "right" ，因为前两者的意思更稳妥，能同时适合从左到右和从右到左显示（阅读）的语言。

textBaseline ：表示文本的基线。可能的值有 "top" 、 "hanging" 、 "middle" 、 "alphabetic" 、"ideographic" 和 "bottom" 。

fillText() 方法使用fillStyle 属性绘制文本， strokeText() 方法使用 strokeStyle 属性为文本描边。

//正常
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
// 起点对齐
context.textAlign = "start";
context.fi llText("12", 100, 40);
// 终点对齐
context.textAlign = "end";
context.fi llText("12", 100, 60);

5、变换

通过上下文的变换，可以把处理后的图像绘制到画布上。2D 绘制上下文支持各种基本的绘制变换。创建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵下，所有处理都按描述直接绘制。为绘制上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。

rotate(angle) ：围绕原点旋转图像 angle 弧度。

scale(scaleX, scaleY) ：缩放图像，在 x 方向乘以 scaleX ，在 y 方向乘以 scaleY 。 scaleX和 scaleY 的默认值都是 1.0。

translate(x, y) ：将坐标原点移动到 (x,y) 。执行这个变换之后，坐标(0,0)会变成之前由 (x,y)表示的点。

transform(m1_1, m1_2, m2_1, m2_2, dx, dy) ：直接修改变换矩阵，方式是乘以如下矩阵。

    m1_1    m1_2      dx
    m2_1    m2_2      dy
    0        0         1

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy) ：将变换矩阵重置为默认状态，然后再调用 transform() 。

把原点变换到表盘的中心：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.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();
}

使用 rotate() 方法旋转时钟的表针：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.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(1);
    //绘制分针
    context.moveTo(0, 0);
    context.lineTo(0, -85);
    //绘制时针
    context.moveTo(0, 0);
    context.lineTo(-65, 0);
    //描边路径
    context.stroke();
}

可以调用 save() 方法，调用这个方法后，当时的所有设置都会进入一个栈结构，得以妥善保管。调用 restore() 方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。

save() 方法保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容。

6、绘制图像

可以使用 drawImage()方法把一幅图像绘制到画布上。
以使用三种不同的参数组合。最简单的调用方式是传入一个 HTML <img> 元素，以及绘制该图像的起点的 x 和 y 坐标。

var image = document.images[0];
context.drawImage(image, 10, 10);

如果想改变绘制后图像的大小，可以再多传入两个参数，分别表示目标
宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。

context.drawImage(image, 50, 10, 20, 30);

绘制出来的图像大小会变成 20×30 像素。

可以选择把图像中的某个区域绘制到上下文中。 drawImage() 方法的这种调用方式总共需要传入 9 个参数：要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。这样调用drawImage() 方法可以获得最多的控制。

context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);

7、阴影

2D 上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。

shadowColor ：用 CSS 颜色格式表示的阴影颜色，默认为黑色。

shadowOffsetX ：形状或路径 x 轴方向的阴影偏移量，默认为 0。

shadowOffsetY ：形状或路径 y 轴方向的阴影偏移量，默认为 0。

shadowBlur ：模糊的像素数，默认 0，即不模糊

var context = drawing.getContext("2d");
// 设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

8、渐变

要创建一个新的线性渐变，可以调用 createLinearGradient() 方法。这个方法接收 4 个参数：起点的 x 坐标、起点的 y 坐标、终点的 x 坐标、终点的 y 坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回
CanvasGradient 对象的实例。

创建了渐变对象后，下一步就是使用 addColorStop() 方法来指定色标。这个方法接收两个参数：色标位置和 CSS 颜色值。色标位置是一个 0（开始的颜色）到 1（结束的颜色）之间的数字。

var context = drawing.getContext("2d");
var gradient = context.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");

//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

为了让渐变覆盖整个矩形，而不是仅应用到矩形的一部分，矩形和渐变对
象的坐标必须匹配才行。

要创建径向渐变（或放射渐变），可以使用 createRadialGradient() 方法。这个方法接收 6 个参数，对应着两个圆的圆心和半径。前三个参数指定的是起点圆的原心（x 和 y）及半径，后三个参数指定的是终点圆的原心（x 和 y）及半径。

var context = drawing.getContext("2d");

var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

9、模式

模式其实就是重复的图像，可以用来填充或描边图形。要创建一个新模式，可以调用createPattern() 方法并传入两个参数：一个 HTML <img> 元素和一个表示如何重复图像的字符串。其中，第二个参数的值与 CSS 的 background-repeat 属性值相同，包括 "repeat" 、 "repeat-x" 、"repeat-y" 和 "no-repeat" 。

var image = document.images[0],
pattern = context.createPattern(image, "repeat");
//绘制矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);

createPattern() 方法的第一个参数也可以是一个 <video> 元素，或者另一个 <canvas> 元素。

10、使用图像数据

2D 上下文的一个明显的长处就是，可以通过 getImageData() 取得原始图像数据。这个方法接收4 个参数：要取得其数据的画面区域的 x 和 y 坐标以及该区域的像素宽度和高度。

取得左上角坐标为(10,5)、大小为 50×50 像素的区域的图像数据：

var imageData = context.getImageData(10, 5, 50, 50);

返回的对象是 ImageData 的实例。每个 ImageData 对象都有三个属性： width 、 height 和data 。其中 data 属性是一个数组，保存着图像中每一个像素的数据。

在 data 数组中，每一个像素用4 个元素来保存，分别表示红、绿、蓝和透明度值。

var data = imageData.data,
red = data[0],
green = data[1],
blue = data[2],
alpha = data[3];

数组中每个元素的值都介于 0 到 255 之间（包括 0 和 255）。

11、合成

还有两个会应用到 2D 上下文中所有绘制操作的属性： globalAlpha 和 globalCompositionOperation 。其中， globalAlpha 是一个介于 0 和 1 之间的值（包括 0和 1），用于指定所有绘制的透明度。默认值为 0。如果所有后续操作都要基于相同的透明度，就可以先把 globalAlpha 设置为适当
值，然后绘制，最后再把它设置回默认值 0。

//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//修改全局透明度
context.globalAlpha = 0.5;
//绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);
//重置全局透明度
context.globalAlpha = 0;

第二个属性 globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合。

source-over （默认值）：后绘制的图形位于先绘制的图形上方。

source-in ：后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明。

source-out ：后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明。

source-atop ：后绘制的图形与先绘制的图形重叠的部分可见，先绘制图形不受影响。

destination-over ：后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见。

destination-in ：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明。

destination-out ：后绘制的图形擦除与先绘制的图形重叠的部分。

destination-atop ：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明。

lighter ：后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮。

copy ：后绘制的图形完全替代与之重叠的先绘制图形。

xor ：后绘制的图形与先绘制的图形重叠的部分执行“异或”操作。

var drawing = document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10, 10, 50, 50);
    //设置合成操作
    context.globalCompositeOperation = "destination-over";
    //绘制蓝色矩形
    context.fillStyle = "rgba(0,0,255,1)";
    context.fillRect(30, 30, 50, 50);
}

三、WebGL

WebGL 是针对 Canvas 的 3D 上下文。
WebGL是从 OpenGL ES 2.0 移植到浏览器中的，而 OpenGL ES 2.0 是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL 支持比 2D 上下文更丰富和更强大的图形图像处理能力。

类型化数组

WebGL 涉及的复杂计算需要提前知道数值的精度，而标准的 JavaScript 数值无法满足需要。为此，WebGL 引入了一个概念，叫类型化数组（typed arrays）。类型化数组也是数组，只不过其元素被设置为特定类型的值。

类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个 ArrayBuffer 对象表示的只是内存中指定的字节数，但不会指定这些字节用于保存什么类型的数据。通过 ArrayBuffer 所能做的，就是为了将来使用而分配一定数量的字节。

var buffer = new ArrayBuffer(20);

创建了 ArrayBuffer 对象后，能够通过该对象获得的信息只有它包含的字节数，方法是访问其byteLength 属性：

var bytes = buffer.byteLength;

（1）视图

使用 ArrayBuffer （数组缓冲器类型）的一种特别的方式就是用它来创建数组缓冲器视图。其中，最常见的视图是 DataView ，通过它可以选择 ArrayBuffer 中一小段字节。为此，可以在创建 DataView实例的时候传入一个 ArrayBuffer 、一个可选的字节偏移量（从该字节开始选择）和一个可选的要选择的字节数。

//基于整个缓冲器创建一个新视图
var view = new DataView(buffer);
//创建一个开始于字节 9 的新视图
var view = new DataView(buffer, 9);
//创建一个从字节 9 开始到字节 18 的新视图
var view = new DataView(buffer, 9, 10);

实例化之后， DataView 对象会把字节偏移量以及字节长度信息分别保存在 byteOffset 和byteLength 属性中。

alert(view.byteOffset);
alert(view.byteLength);

（2）类型化视图

类型化视图一般也被称为类型化数组，因为它们除了元素必须是某种特定的数据类型外，与常规的数组无异。

类型化数组是 WebGL 项目中执行各种操作的重要基础。

目前，主流浏览器的较新版本大都已经支持 <canvas> 标签。同样地，这些版本的浏览器基本上也都支持 2D 上下文。但对于 WebGL 而言，目前还只有 Firefox 4+和 Chrome 支持它。

JS之使用Canvas绘图

一、基本用法

二、2D上下文

1、填充和描边

2、绘制矩形

3、绘制路径

4、绘制文本

5、变换

6、绘制图像

7、阴影

8、渐变

9、模式

10、使用图像数据

11、合成

三、WebGL

类型化数组

（1）视图

（2）类型化视图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

学习随笔

前端攻城狮