在 HTML5 画布 Canvas 上绘图

发布于 2018-10-01 20:33:26 字数 9377 浏览 1520 评论 0

Canvas 画布是一个绘图界面，用于呈现和动态显示图形元素，如矩形区域和位图图像。这些元素的操作使用脚本语言（通常是 JavaScript）完成。

在 HTML 中设置画布

画布在 HTML 中通过 <canvas> 标签定义。与其他 HTML 标签类似，<canvas> 的属性（如宽度和高度）作为特性输入。假设你希望创建一个宽 200 像素、高 100 像素的画布，并将其命名为myCanvas，稍后在 JavaScript 中引用它时将用到。

什么是 Canvas？

HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像，画布是一个矩形区域，您可以控制其每一像素，Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 Canvas 元素，规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

在 HTML 文档中输入 <canvas> 标签。

<canvas id="myCanvas" width="500" height="500"></canvas>

在 JavaScript 文档中，创建一个变量，在编写脚本时该变量将代替“myCanvas”。这里，我们将该变量命名为“myCanvas”，并使用 getElementById 将其链接到“myCanvas”。

var myCanvas = document.getElementById("myCanvas");

画布的 CanvasRenderingContext2D 对象具有操作画布的所有命令。这里，我们在上下文对象中检索“myCanvas”。我们将此变量称为“myContext”。

var myContext = myCanvas.getContext("2d");

绘制图形

在画布上绘制简单的线条非常容易。使用 JavaScript 的 moveTo 方法可设置线条开始位置的坐标。然后只需使用另一方法设置终点。第二步可以使用若干方法，每种方法专用于帮助呈现一种不同的线型，无论是直线、贝塞尔曲线还是圆弧。若要将线条合并为形状，可以闭合对 beginPath 和 closePath 方法调用中的线条。在指定所需的外观之后，可以使用 fill 方法应用颜色，并使用 stroke 方法执行线条和形状的呈现。

基本的样式

让我们应用一些基本风格。这里，我们通过使用 fillStyle 属性绘制一个黑色矩形，将画布背景设置为黑色 (#000)。然后使用 strokeStyle 属性将线条颜色设置为白色 (#fff)，使用 fillRect 方法应用黑色背景，并使用 lineWidth 属性将线条的粗细设置为 3 个像素。

// Specify a black background, and white lines that are 3 pixels thick.
myContext.fillStyle = '#000';
myContext.strokeStyle = '#fff';
myContext.fillRect(0,0,500,500);
myContext.lineWidth = 3;
myContext.fill();

在后续步骤中，我们将在这个 500×500 的黑色画布上继续构建。

绘制白色的线条

现在，我们准备在画布的黑色表面绘制一个白色线条。我们先从直线开始。使用 moveTo 方法设置直线的起点，使用 lineTo 方法设置终点。这些方法采用两个数字作为参数。第一个数字表示 x 轴坐标，或者表示此坐标定义的自画布左侧算起的像素数。第二个数字是从顶部开始测量的 y 轴坐标。

// Draw a line that starts at the upper left corner of the canvas and ends at the lower right.
myContext.moveTo(0,0);
myContext.lineTo(500,500);
myContext.stroke();

绘制二次贝塞尔曲线

若要绘制二次贝塞尔曲线，请使用 quadraticCurveTo 方法，该方法采用两个坐标—曲线的一个控制点和一个端点。

// Draw a swooping curve that spans the width of the canvas.
myContext.moveTo(0,0);
myContext.quadraticCurveTo(0,500,500,250);
myContext.stroke();

绘制三次贝塞尔曲线

若要绘制三次贝塞尔曲线，请使用 bezierCurveTo 方法，该方法采用三个坐标—曲线的两个控制点和一个端点。

// Draw a V-shaped Bezier curve that spans the entire canvas.
myContext.moveTo(0,0);
myContext.bezierCurveTo(500, 820, 0, 500, 500, 0);
myContext.stroke();

创建一个圆

若要创建一个圆，请使用 arc 方法：在设置用于绘制圆形轮廓的原点时，请确保将 moveTo 方法设置在沿线条路径的位置上，否则圆上将有一条通向 moveTo 坐标的“尾巴”。

// Draw a circle that spans the width of the canvas.
myContext.moveTo(500,250);
myContext.arc(250,250,250,0,Math.PI*2,true);
myContext.stroke();

调用中的多个线条

通过闭合对 beginPath 和 closePath 调用中的多个线条，可以从上述线条的任意组合中绘制一个 2D 形状。然后，整个形状可以使用 fill 接收一种颜色。前面设置的笔划样式将创建白色线条，在与应用于主体的红色 (#f00) 合并时，该形状将继承双色调外观。

// Draw a red diamond that spans the entire canvas.
myContext.fillStyle = '#f00';
myContext.beginPath();
myContext.moveTo(250,0);
myContext.lineTo(0,250);
myContext.lineTo(250,500);
myContext.lineTo(500,250);
myContext.closePath();
myContext.fill();

显示位图图像

位图图像（如 .jpg、.png 和 .gif 文件）可以放置在画布上，甚至可以在代码中缩放和裁剪，不会触及原始文件。若要添加位图图像，请指定该图像的 URI，然后使用 drawImage 方法在画布上指定其位置。使用可选参数可将图像缩放到指定的大小，甚至仅显示图像的一个片段，这对于实现滚动背景或使用子画面表动态显示子画面等操作非常有用。

设置坐标

若要在屏幕上绘制位图图像而不进行任何修改，请指定要用于左上角的 x 坐标和 y 坐标。

// Draw an image at the upper left corner of the canvas (0, 0).
var myImg = new Image();
myImg.src = 'myImageFile.png';
myContext.drawImage(myImg, 0, 0)

缩放图像

若要缩放图像，可在末尾添加两个数字，分别代表宽度和高度。如果对你有帮助，不妨将后两个数字视为“右部”和“底部”，而不是“宽度”和“高度”。

// Scale the image to span the entire 500 x 500 canvas.
var myImg = new Image();
myImg.src = 'myImageFile.png';
myContext.drawImage(myImg, 0, 0, 500, 500)

仅使用图像的一个切片

若要仅使用图像的一个切片，则需要定义两个矩形区域，对 drawImage 的调用提高到 9 个参数（第一个参数是 JavaScript 图像对象）。要传入的前四个数字表示图像的切片。后四个数字表示要显示该切片的画布区域。

// Take a 20 x 20 slice from the upper left of the image and scale it to span the entire 500 x 500 canvas.
var myImg = new Image();
myImg.src = 'myImageFile.png';
myContext.drawImage(myImg, 0, 0, 20, 20, 0, 0, 500, 500);

渐变

任何人只要熟悉在图形设计程序中定义渐变的常见方式，都会喜欢使用 JavaScript 代码定义渐变的简单性。在设计程序中是选择颜色，渐变中的颜色位置使用水平滑块设置。JavaScript 中的唯一区别是使用从 0 到 1 范围内的小数值代替滑块。

线性渐变

在设计程序中，线性渐变使用线条在图像上定位，线条的开始和结束位置确定方向和缩放级别。在 JavaScript 中，该线条使用两对 x、y 轴坐标绘制。然后将 4 个数字传递到 createLinearGradient 方法以创建 CanvasGradient 对象。在定义渐变对象的属性之后，就会得到所需的渐变，CanvasGradient 作为 fillStyle 传递到 fillRect 方法进行呈现。

// Render a white, red and black gradient diagonally across the canvas.
var myGradient = myContext.createLinearGradient(0,0, 500,500); // gradient starts at upper left and ends at lower right
myGradient.addColorStop(0,"#fff"); // white at the beginning of the gradient
myGradient.addColorStop(0.5,"#f00"); // red in the middle of the gradient
myGradient.addColorStop(1,"#000"); // black at the end of the gradient
myContext.fillStyle = myGradient; // ensure the next call to fillRect will use the specified gradient
myContext.fillRect(0,0,500,500); // rectangle that contains the gradient spans the entire canvas

径向渐变

径向渐变的定义方式稍有不同。为渐变的起点和终点绘制两对 x、y 轴坐标—，这与线性渐变中一样—，但每个坐标对都有第三个与其关联的 z 轴坐标，用于定义半径。可以想像为围绕一个坐标绘制一个圆，该坐标位于中心 (250, 250)，绘制的圆的大小以像素为单位定义。这样定义两个圆之后，一个圆较小，一个圆跨整个画布，有 6 个数字传递到 createRadialGradient。在呈现时，径向渐变在两个圆之间的空间中绘制，颜色等级与圆的半径的大小成正比。

// Render a white, red and black radial gradient spanning the canvas.
var myGradient = myContext.createRadialGradient(250,250,0, 250,250,500); // gradient is centered and spans the entire canvas
myGradient.addColorStop(0,"#fff"); // white at the beginning of the gradient
myGradient.addColorStop(0.5,"#f00"); // red in the middle of the gradient
myGradient.addColorStop(1,"#000"); // black at the end of the gradient
myContext.fillStyle = myGradient; // ensure the next call to fillRect will use the specified gradient
myContext.fillRect(0,0,500,500); // rectangle that contains the gradient spans the entire canvas

动画

可以使用多种方法绘制动画。

画布内的元素

对于画布内的元素，JavaScript 提供了 setInterval 方法，该方法计划一个重复调用的函数，每经过定义的时间间隔便调用一次该函数。在该函数中，需要重绘画布来反映对其上呈现的对象的更改。下面是一个示例，其中一个函数初始化该动画，将呈现频率计划为大约每秒 60 帧（每 13.33 毫秒一帧），并且重复调用该函数将重绘画布。在本例中，径向渐变从一个小点逐渐增大，直到填充整个画布。

// Generate an animation of a growing gradient.

// These variables must exist globally so both functions can access them.
var myCanvas;
var myContext;
var outerBoundary = 0, innerBoundary = 0;

// Start the animation.
window.onload = initialize;
function initialize() {
myCanvas = document.getElementById("myCanvas");
myContext = myCanvas.getContext("2d");
setInterval("redrawCanvas()",13); // redraw @ approximately 60 frames per second
}

// Run the animation.
function redrawCanvas() {
if (outerBoundary < 500) {
outerBoundary++; // grow the size of the gradient
} else {
innerBoundary++; // grow the size of the inner white circle if red is maxed
}
var myGradient = myContext.createRadialGradient(250,250,innerBoundary, 250,250,outerBoundary);
myGradient.addColorStop(0,"#fff"); // white at the beginning of the gradient
myGradient.addColorStop(0.5,"#f00"); // red in the middle of the gradient
myGradient.addColorStop(1,"#000"); // black at the end of the gradient
myContext.fillStyle = myGradient; // ensure the next call to fillRect will use the specified gradient
myContext.fillRect(0,0,500,500); // rectangle that contains the gradient spans the entire canvas
}