HTML5的Convas APIs方法怎么使用

这篇文章主要介绍了HTML5的Convas APIs方法怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5的Convas APIs方法怎么使用文章都会有所收获，下面我们一起来看看吧。

☆canvas.getContext（'2d'）

不可在convas中直接绘图，用必须该方法获得其二维空间绘图上下文。

☆context.beginPath（）

表示开始的路径路径。

☆context.isPointInPath（x，y）

判断某个点是否在路径上。在坐标系被转换后该方法不适用。

☆context.moveTo（x，y）

相当于将画笔从画板提起，笔尖离开画板，然后再将笔尖定位在（x，y）坐标处，在这个新的位置开始新的替换。

☆context.lineTo（x，y）

相当于画笔笔尖不离开画板，画笔笔尖从当前坐标位置移动至（x，y）坐标处，替换一条线段。

☆context.stroke（）

在convas上绘图后，绘制一些操作必须调用该方法才能让绘制内容显示。

☆context.save（）

该方法保存convas的当前状态，或者以后对convas坐任何改变，只要在做这些改变前保存convas状态，以后就可以调用context.restore（）方法恢复到保存的这个状态。通常在一段新替换或修改操作前应该保存convas的原始状态（没有进行任何绘制或更改）每次在一段新绘制或修改操作结束后在将其恢复到原始状态。这样有利于以后的绘制操作。实际上，帆布的2D绘图环境上下文许多的属性状语从句：一些方法与状态有关，每个属性的值被改变（或者使用某些方法改变绘图状态），绘图状态就改变。若在每次改变后都保存，则一个属性多个的状态会以栈（堆）的形式保存，可以依照栈的顺序多次调用恢复（）方行业释义法律来回到相应保存的状态。

☆context.translate（x，y）

该方法将当前坐标原点移动到（x，y）处。

☆context.restore（）

恢复convas状态为上一次保存的状态。

☆context.closePath（）

此命令的行为与lineTo函数非常相似，不同之处在于，自动将目的地视为路径的起点。但是，closePath还会通知画布当前形状已关闭或形成了一个完全包含的区域。这对于将来的填充和描边很有用。此时，您可以继续在路径中继续使用更多的段来创建其他子路径。或者，您可以随时使用beginPath重新开始并完全清除路径列表。

☆context.fill（）;

在设置填充样式后填充封闭路径。调用该方法后不必再调用context.stroke（）方法。

☆context.fillRect（x，y，宽度，高度）

在（X，Y）处绘制并填充宽和长为（宽度，高度）的矩形区域。调用该方法后不必再调用context.stroke（）方法。

☆context.strokeRect（x，y，width，height）

在（x，y）处布局宽和长为（width，height）的矩形轮廓。

☆context.clearRect（x，y，width，height）

清除矩形区域中的所有内容并将其重置为其原始的透明颜色。清除位置（矩形的左上角）在（x，y，），大小为（宽度，高度）的矩形区域。清除画布中矩形的功能是使用HTML5 Canvas API创建动画和游戏的核心。通过重复绘制和清除画布的各个部分，可以呈现动画的幻觉，并且Web上已经存在许多这样的示例。但是，要创建平滑运行的动画，您将需要利用剪切功能，甚至可能需要辅助缓冲的画布，以最大程度地减少频繁清除画布所引起的闪烁。

☆context.drawImage（）

•context.drawImage（img，x，y）在（x上，该方法有三个重载，可将图像放置在画布上。图像来源可以是页面中的img标记，JS中的图像对象和视频的一帧。•context.drawImage（img，x，y，w，h），则y）处使用图像img图像。当画布的大小大于图像时，整个图像被布局；当图像大于canvas时，多余的部分被裁剪。在（x，y）处用图像img长和宽为（w，h）的矩形区域。图像的大小将改变为（w，h）。•context.drawImage（img，imgx，imgy，imgw，imgh ，cx，cy，cw，ch）将一个img图像作为布局对象，裁剪img上位置为（imgx，imgy ）大小为（imgw，imgh）的区域，放置在画布内部位置为（cx，cy）处位置•context.drawImage（视频，vx，vy，vw，vh，cx，cy，cw，ch）将是一个（大小为（cw，ch）的区域。如果图像上裁切区域超出了图像范围，则引发异常。视频对象作为绘制对象，抓取视频上位置为（VX，VY ）大小为（VW，VH）的一帧，在画布上位置为（CX，CY）绘制处大小为（CW，CH）的区域。，， drawImage（）的第一个参数也可以是另一个canvas。

☆context.getImageData（x，y，width，height）

该方法从画布内部位置为（x，y）处，获得大小（宽度，高度）一块区域，返回返回一个ImageData对象。ImageData有宽度，高度和数据三个属性。data属性是一个数组，中数组每连续的四个元素代表一个像素，四个连续元素依次含有RGBA的颜色与透明度信息。连续四个的元型态素必须属于一个像素，第一个元素的位置不是随意取的。像素数组是按照从上到下，从左到右的顺序在画布中指定区域扫描获取。依次排列的元素个数为宽度*高度*4。要获得特定位置的提示信息。使用了该方法的网页用浏览器以本地文件方式打开不会正常工作，通常会产生安全错误（安全错误）。可以将文件上传至Web服务器，然后请求访问解决此问题。并且，涉及到的图像，JS和HTML必须是不过，IE9可以通过本地文件访问。一个示例如下：

复制代码

代码如下：

//获取一个预期区域var imageData = context.getImageData（0，0，3，3 ）; // 3x3网格</ p> <p> var width = imageData.width; //特定特定于预期区域的位置var x = 2; var y = 2; //绿颜色在预定尺寸中对应元素的索引var pixelRedindex =（（y-1）*（width * 4））+（（x-1）* 4）; var pixelGreenindex = pixelRedindex + 1; var pixelBlueindex = pixelRedindex + 2; var pixelAlphaindex = pixelRedindex + 3; </ p> <p> var pixel = imageData.data; // CanvasPixelArray </ p> <p> var red = pixel [pixelRedindex]; var green = pixel [pixelGreenindex]; var blue = pixel [pixelBlueindex]; var alpha = pixel [pixelAlphaindex];

☆context.createImageData（w，h）

产生一个大小为（w，h）的ImageData对象，ImageData对象的意义同getImageData（）所获取的ImageData对象。

☆context.putImageData（ImageData，x，y，x1，y1，w，h）

将一个的ImageData对象绘制到画布上（X，Y）处。四个后的英文参数柯林斯选参数，用于设定一个裁剪矩形的位置和大小。

☆context.createLinearGradient（x1，y1，x2，y2）

在（x1，y1）和（x2，y2）之间产生线性垂直。如：

复制代码

代码如下：

var gradientName = context.createLinearGradient（-5，-50，5 ，-50）;

☆Gradient.addColorStop（偏移量，颜色）

color参数是要在笔触中应用的颜色，或要在偏移位置填充的颜色。偏移位置的值介于0.0到1.0之间，代表应沿着渐变线到达颜色的距离。如：

gradientName.addColorStop（1，'＃552200'）;

其中color可用CSS中的rgba（r，g，b，a）函数来产生透明渐变，如：

复制代码

代码如下：

//产生50％的颜色透明渐变gradientName.addColorStop（0.2，'rgba（0，0，0，0.5）'）;

☆context.createRadialGradient（x0，y0，r0，x1，y1，r1）

前三个参数代表一个半径为r0的以（x0，y0）为中心的圆，最后三个参数代表一个半径为r1的以（x1，y1）为中心的第二圆。跨两个圆之间的区域绘制渐变。

☆context.createPattern（img，'repeatPattern'）

用一个图像img产生重复类型为repeatPattern的某路径的strokeStyle样式或填充的fillStyle样式。repeatPattern的值可以获取repeat，repeat-x，repeat-y和no-repeat之一。如：

复制代码

代码如下：

context.strokeStyle = context.createPattern（gravel，'repeat'）;

参数img也可以是另一个canvas或video

☆context.scale（xMultiple，yMultiple）

两个参数分别指定对象在x和y方向上以后的缩放比例倍数，大于1为放大，0和1之间为缩小。若为负值，则可以实现倒影，翻转等效果。

☆context.rotate（角度）

用于旋转绘图环境的上下文，以当前坐标原点为按转中心，以弧度为单位，结合使用Math.PI。参数angle为正值时为顺时针旋转，为负值时按逆时针旋转。

☆context.transform（ScaleX，skewY，skewX，ScaleY，transX ，transY）

ScaleX和ScaleY分别x和y坐标的缩放。skewY是控制上下文的垂直切变，其值可以为任意大小的正负。该函数用于控制绘图对象的大小和切变和位置，是一种变换矩阵。浮点或整型，相当于对纵坐标进行Y'= Y + skewY * x.skewX是控制上下文水平的切变，其值可以为任意大小的正负浮点或整型，相当于对横坐标进行x'= x + skewX * y。最后两个参数的作用相当于translate（x，y）中两个参数的作用。

☆context.setTransform（ScaleX，skewY，skewX，ScaleY，transX，transY）

该方法可以转换，但是转换方法会与之前已经应用过的转换，缩放，旋转方法效果复合，产生复杂的复合转换效果。setTransform方法可以从上下文原始的状态应用转换，不会与之前的转换因此。通用context.setTransform（1、0、0、1、0、0）将上下文的变换状态恢复到其原始值。

☆fillText（文字，x，y，最大宽度）

在（X，Y）坐标处绘制填充内容为文本的文本.maxwidth可选的英文参数，用于限制所有文本的宽度和文本间距总和的大小，所有若状语从句：间距的宽度超出这个值，则单个文本字符与字符间距的宽度都会被压缩，单个字符变得细长，间距变小。可以结合context.font，context.fillStyle，context.textAlign等属性绘制填充文本。

☆strokeText（文本，x，y，最大宽度）

在（X，Y）坐标处绘制路径内容为文本的文本.maxwidt可选的英文参数，用于限制所有文本的宽度和文本间距总和的大小，所有若状语从句：间距的宽度超出这个值，则单个文本可以与context.font，context.textAlign，context.lineWidth，context.strokeStyle等属性放置路径文本。例如

复制代码

代码如下：

var fontSize = 100; context.font = fontSize +“ px Arial”; while（context.measureText（“ Hello world！”）。width> 140）{ fontSize--; context.font = fontSize +“ px Arial”; } context.fillText（“ Hello world！”，10，10）; context.fillText（“字体大小为” + fontSize +“ px”，10，50）;

☆context.measureText（“ text”）

该方法根据当前字体，textAlign和textBaseline的值计算文本所占区域的大小。text方法是用于放置的文本内容。该方法返回一个TextMetrics对象，目前，TextMetrics对象只有一个宽度属性，将来可能提供更多属性。

☆context.rect（x，y，w，h）

在点（x，y）处放置宽w，高h的矩形。当前点被忽略。但矩形顶部对齐后（x，y）成为新的当前点。

☆context.arc（x，y，radius，startAngle，endAngle，逆时针）

x，y是圆弧所在的圆心坐标； radius是圆弧半径；startAngle，endAngle分别是起始弧度和终止弧度，以弧度为单位，长度率&pi;用Math.PI表示，变量0的弧度是水平向右的;逆时针表示绘制弧度的方向，是可选参数，布尔值，真正为逆时针，假的。为顺时针，默认为假使用该方法可以省略了lineTo在方法使用该方法绘制一段圆弧后，接下来的路径转向会从圆弧的结束端点开始。

☆context.arcTo（x1，y1，x2，y2，半径）

当前点与（X1，Y1）形成一条线L1，（X1，Y1）与（X2，Y2）另一形成条线L2，当前点与（X2，Y2）形成第三条线L3若以。（X1 ，y1）为原点，L1和L2为坐标轴，与L1和L2相切的，半径为半径，且与“线段” L3在同一象限的圆O1上，设与L1的切点为p1，与L2圆O1上p1与p2间有两段弧线，里原点（x1，y1）较近的一段弧（也是圆上允许的一段弧）为所放置的弧线。

另外，当前点与（X1，Y1）之间也会绘制出一条线段与弧线相连接，因为路径绘制是连续的，当前点与（X1，Y1）之间的线段先绘制，紧接着绘制弧线。切点p2成为下一个当前点。该方法常用于绘制圆角矩形。

☆context.quadraticCurveTo（x1，y1，x2，y2）

在当前坐标与（x2，y2）放置一条二次贝塞尔曲线段，弯曲度由（x1，y1）控制。（x1，y1）不在曲线段上。

HTML5 Canvas API中曲线的其他选项包括bezierCurveTo，arcTo和arc函数。这些曲线采用其他控制点，半径或角度来确定曲线的特性。

☆context.bezierCurveTo（cp1x，cp1y，cp2x，cp2y，x，y）

在当前点与（x，y）间放置由控制点（cp1x，cp1y）和（cp2x，cp2y）控制弯曲度的三次贝塞尔曲线。

☆context.clip（）

这个方法将根据上一次所放置的替换路径创建一个剪辑区域（剪辑区域）。剪辑区域相当于一个蒙版，之后替换的内容仅落在剪辑区域内部的部分就会被显示。

☆context.isPointInPath（x，y）

检测坐标（x，y）是否在已取代的路径内部。返回称为true或false。

☆canvas.toDataURL（type，args）

该方法能够将画布转换为图像，图像是基于的Base64编码的如。果不指定两个参数，无参数调用该方法，转换的图像格式为PNG格式。&bull;类型：指定要转换的图像格式，如图像/ png，image / jpeg等。&bull;args：可选参数。例如，如果type为image / jpeg，则args可以是0.0和0.1之间的值，以指定图像的品质。例如，下面的代码将画布中绘制已的内容在一个新的浏览器窗口或选项对话卡中打开：

复制代码

代码如下：

var canvas = document.getElementById（“ myCanvas”）; window.open（canvas.toDataURL（“ image / png”））;

关于“HTML5的Convas APIs方法怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML5的Convas APIs方法怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。