前端vs创意

JavaScript第十五章节 使用Canvas绘图（2

2019-11-05  本文已影响0人  27亿光年中的小小尘埃

基本用法

要使用<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){ 
    //获取2D上下文对象
    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);
}

默认情况下，浏览器会将图像编码为 PNG 格式（除非另行指定）。Firefox 和 Opera 也支持基于
"image/jpeg"参数的 JPEG 编码格式。由于这个方法是后来才追加的，所以支持<canvas>的浏览器也
是在较新的版本中才加入了对它的支持，比如 IE9、Firefox 3.5 和 Opera 10。

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

2D上下文

使用 2D 绘图上下文提供的方法，可以绘制简单的 2D 图形，比如矩形、弧线和路径。2D 上下文的
坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x 值越大表示
越靠右，y 值越大表示越靠下。默认情况下，width 和 height 表示水平和垂直两个方向上可用的像素
数目。

填充和描边

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";
}

绘制矩形

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect()、
strokeRect()和 clearRect()。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形
宽度和矩形高度。这些参数的单位都是像素。

示例:

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
 var context = drawing.getContext("2d");
 /*
 * 根据 Mozilla 的文档
 * http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
 */
 //绘制红色矩形
 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");
 /*
 * 根据 Mozilla 的文档
 * http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
 */
 //绘制红色描边矩形
 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");
 /*
 * 根据 Mozilla 的文档
 * http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
 */
 //绘制红色矩形
 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);
}

绘制路径

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

示例:

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();
}

绘制文本

文本与图形总是如影随形。为此，2D 绘图上下文也提供了绘制文本的方法。绘制文本主要有两个
方法：fillText()和 strokeText()。这两个方法都可以接收 4 个参数：要绘制的文本字符串、x 坐
标、y 坐标和可选的最大像素宽度。而且，这两个方法都以下列 3 个属性为基础

变换

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

绘制图像

2D 绘图上下文内置了对图像的支持。如果你想把一幅图像绘制到画布上，可以使用 drawImage()
方法。根据期望的最终结果不同，调用这个方法时，可以使用三种不同的参数组合。最简单的调用方式
是传入一个 HTML <img>元素，以及绘制该图像的起点的 x 和 y 坐标。

阴影

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

渐变

渐变由 CanvasGradient 实例表示，很容易通过 2D 上下文来创建和修改。要创建一个新的线性渐
变，可以调用 createLinearGradient()方法。这个方法接收 4 个参数：起点的 x 坐标、起点的 y 坐
标、终点的 x 坐标、终点的 y 坐标。

模式

模式其实就是重复的图像，可以用来填充或描边图形。

使用图像数据

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

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

合成

还有两个会应用到 2D 上下文中所有绘制操作的属性：globalAlpha 和 globalCompositionOperation。

上一篇 下一篇

猜你喜欢

热点阅读