【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案

最新推荐文章于 2024-08-18 10:07:21 发布

不一样的水果

最新推荐文章于 2024-08-18 10:07:21 发布

阅读量1.6w

点赞数 1

分类专栏： JS学习

JS学习专栏收录该内容

148 篇文章 2 订阅

订阅专栏

<canvas>矩形、颜色、透明度、渐变及图案（感觉没怎么懂！！先放这吧，回产头再研究）

矩形

CanvasRenderingContext2D对象定义了4个用于绘制矩形的方法

都接受两个参数，其中一个指定矩形的一个顶点，另一个参数指定矩形的宽高

n fillRect()

使用fillStyle来填充指定矩形。

n strokeRect()

strokeStyle和其它线段的属性来勾勒指定的矩形边框

n clearRect()

和fillRect()类似，不同的是，它会忽略当前填充样式。采用透明的黑色像素

以上三个不影响当前路径以及路径中的当前点

n rect();

会对当前路径产生影响：它会在将指定的矩形添加到当前路径的子路径中。和其他用于定义路径的方法一样，它本身不会自动做任何和填充以及勾勒相关的事情。

颜色、透明度、渐变以及图案

strokeStyle和fillStyle属性指定了线条勾勒的样式和区域填充的样式。大部分情况下，这些属性用于指定不透明或者半透明情况下的颜色，但是，也可以将它们设置成CanvasPattern或者CanvasGradient对象，以实现采用重复的背景图片或线性或辐射型的渐变色来进行勾勒或者填充。除引之外，还可以通过设置globalAlpha属性使得所有绘制的东西都变成半透明。

要指定一种纯色，可以使用html4标准，定义的颜色名字或者使用css颜色串

context.strokeStyle= “blue”;

context.fillStyle= “#aaa”;

目前，支持CSS3颜色的浏览器除了允许标准16进制RGB颜色之外，还允许使用RGB/RGBA/HSL/HSLA颜色空间。

var colors = [

"#f44", //十六进制RGB

"#44ff44",//十六进制RRGGBB

"rgb(100%,25%,100%)",//用百分比来表示RGB色值

"rgba(100%,25%,100%,0.5)",//rgb加上0~1的alpha值：半透明紫色

"rgba(0,0,0,0)", //全透明黑色

"transparent",//和上述类似

"hsl(60,100%,50%)",//全饱和黄色

"hsl(60,75%,50%)",//低饱和黄色

"hsl(60,100%,75%)",//全饱和暗黄色

"hsl(60,100%,25%)",//全饱和亮黄色

"hsla(60,100%,50%,0.5)"//全饱和黄色，50%不透明度

];

HSL颜色空间采用三个数字来指定颜色，这个三个数字分别代表色调、饱和度和亮度其中色调是颜色轮周围的度数。色调是0^o表示红色，60^o表示黄色，120^o表示绿色，180^o 表示靛色，240^o表示蓝色，300^o 表示品红色，360^o再次转回红色。饱和度描述的是颜色的强度，饱和度为0为暗灰色。亮度描述的是一种颜色多么的明亮或多么的暗淡。它也是百分比来表示。任何HSL颜色，凡亮度为100%的都是纯白色，同样任何亮度为0的颜色都是纯黑色。HSLA颜色空间和HSL类似，只是前者增加了一个alpha值，它的取值范围从0.0(透明)~1.0(不透明)。

如果又想要半透明的颜色，又不想显式地给每种颜色都设置一个透明通道的话，又或者想给透明的图片或者图案加半透明效果的话，可以通过设置globalAlpha属性。0—全透明 1—不透明（默认）

如果不想绘制纯色（也许半透明的），可以使用渐变和重复图片来填充和勾勒路径。用宽线来勾勒，上面采用线性渐变填充，下面则使用半透明的辐射状渐变填充。下面的代码片段展示了这些图案和渐变是如何创建出来的。

要使得背景图片的图案而不是颜色填充或勾勒，可以将fillStyle或者strokeStyle属性设置成CanvasPattern对象，该对象可以通过调用上下文对象的createPattern()方法返回。

var image = document.getElementById(“myimage”);

c.fillStyle = c.createPattern(image,”repeat”);

第一个参数指定了用做图案的图片。它必须是文档中的一个<img>元素、<canvas>元素或者<video>元素（或通过Image()构造函数创建出来的图片对象）第二参数通常是“repeat”，表示采用重复的图片填充，这和图片大小是无关的。除此之外，还可以使用”repeat-x”、”repeat-y”或者”no-repeat”。注意的是还可以使用一个<canvas>元素作为另外一个<canvas>元素的图案。

如：

var offscreen =document.createElement("canvas");

offscreen.width = offscreen.height = 10; //设置它的大小

offscreen.getContext("2d").strokeRec(0,0,6,6); //获取它的上下文进行绘制

var pattern =c.createPattern(offscreen,"repeat");

要使用渐变色进行填充或勾勒，可以将fillStyle属性设置为一个CanvasGradient对象，该对象通过调用上下文对象上的createLinearGradient()或createRaiaGradient()方法来返回。创建渐变色需要通过好几步骤。

第一步：要创建一个CanvasGradient对象。createLinearGradient()方法需要的参数是定义一条线段两个点的坐标，这条线段上每个点的颜色都不同。createRadialGradient()方法需要的参数是两个圆的圆心和半径。小内的区域和大圆外的外的区域都会用纯色来填充：而两圆之间的区域会用渐变色来填充。

在创建了CanvasGradient对象以及定义了画布中要填充的区域之后，必须通过调用CanvasGradient对象的addColorStop()方法来定义渐变色，该方法的第一个参数是0.0~1.0之间的数字，第二参数是一个css颜色值。必须至少调用该方法两次来定义一个简单的颜色渐变，但是可以调用它多次。在0.0位置的颜色出现在渐变的起始，在1.0位置的颜色会出现在渐变色最后。如果还指定其他颜色，那么它们会出现在渐变指定的小数位置，其他地方的颜色会进行平滑过度。如：

//一个线性渐变，沿着画布的对角线

var bgfade =c.createLinearGradient(0,0,canvas.width,cavas.height);

bgfade.addColorStop(0.0,"#88f");//以左上角亮蓝色开始

bgfade.addColorStop(1.0,"#fff");//一直到右下角以白色结束

//两个同心圆之间的一种渐变，中间为透明色，然后慢慢变为灰色透明，最后再回到透明色

var peekhole =c.createRadialGradient(300,300,100,300,300,300);

peekhole.addColorStop(0.0,"transparent");//透明

peekhole.addColorStop(0.7,"rgba(100,100,100,.9)"); //灰色半透明

peekhole.addColorStop(1.0,"rgba(0,0,0,0)");//再次透明

c.fillStyle = bgfade; //以线性渐变开始

c.fillRect(0,0,600,600); //填充整个画布

c.strokeStyle = pattern; //使用图案来勾勒线段

c.lineWidth = 100; //使用非常宽的线段

c.strokeRect(100,100,400,400); //绘制一个大的正方形

c.fillStyle = peekhole; //切换到辐射状渐变

c.fillRect(0,0,600,600); //使用半透明填充来遮罩画布

线段绘制相关的属性

前面说过lineWidth属性，它用于通过stroke()方法和strokeRect()方法绘制时线段的宽度。除此之外，还有其他三个图形属性影响绘制线段。

lineWidth属性的默认值是1,可以将该属性设置成任意正数，甚至是小于1的小数。

另外三个与线段绘制相关的属性影响路径中未连接的端点的外观以及两条路径相交顶点的外观。

lineCap

lineJoin

miterLimit属性指定斜接部分长度的上限。

文本

要在画布上绘制文本，通常使用fillText()方法来使用fillStyle属性指定的颜色（渐变或者图案）绘制文本。要想在大字号文本上加特效，可以使用strokeText()方法，该方法会在每个字形外边绘制轮廓。fillText()方法和strokeText()方法都接受要绘制的文本内容作为第一个参数，以及文本绘制位置的X轴和Y轴坐标作为第二个和第三个参数。但是这两个方法都不会对当前路径和当前点产生影响。

font属性指定了绘制文本时候采用的字体。该属性值是一个字符串，语法和CSS的font属性一致。下面是一些例子。

“48pt sans-serif”

“bold 18px TimesRoma”

“italic 12ptmonospaced”

“bolder smallerserif”

textAlign属性指定文本应当参照X轴坐标如何进行水平对齐。

textBaseLine属性则指定了文本应当参照的Y轴坐标如何进行垂直对齐。

裁剪

在定义一条路径之后，还可以调用clip()方法来定义一个裁剪区域。一旦定义了一个裁剪区域，在该区域外将不会绘制任何内容。要注意一点的是：当调用clip()方法时，当前路径自身就会裁剪到当前裁剪区域中，之后，被裁剪的路径就变成了新的裁剪区域。这意味着，clip()方法只会缩小裁剪区域，永远不会放大裁剪区域。由于没有提供重置裁剪区域的方法，因此在调用clip()之前通常要调用save()方法，以便于之后恢复未裁剪区域。

//定义一些绘制属性

c.font = "bold 60pt sans-serif";

c.lineWidth = 2;

c.strokeStyle = "#000";

//勾勒矩形轮廓和文本轮廓

c.strokeRect(175,25,50,325);

c.strokeText("<canvas>",15,330);

polygon(c,3,200,225,200);

polygon(c,3,200,225,100,0,true);

//将该路径定义成裁剪区域

c.clip();

//用5个像素宽的线段来勾勒路径，完全在裁剪区域内

c.lineWidth = 10;

c.stroke();

//填充在裁剪区域的矩形部分和文本部分

c.fillStyle = "#aaa";

c.fillRect(175,25,50,325);

c.fillSytle="#888";

c.fillText("<canvas>",15,330);

阴影

CanvasRenderingContext2D对象定义4个图形属性用于绘制下拉阴影，如果正确设置这些属性，绘制的任何线段、区域、文本以及图片都会拥有下拉阴影，这样外观上看起来就像它浮出了画布表面。

shadowColor属性指定阴影的颜色。

shadowOffsetX属性和shadowOffsetY属性指定阴影的x轴和y轴的偏移量。这两个属性默认值都是0，表示直接将阴影绘制在图形正文，在这咱位置的阴影是不可见的。

shadowBlur属性指定了阴影边缘的模糊程序。默认0，表示产生的清晰明亮的阴影。该属性值越大表示阴影越模糊。

图片

drawImage()将用于将源图片的像素内容复制到画布上，有需要的时候可以对图片进行缩放和旋转。

调用drawImage()方法的时候可以传递3个、5个、或9wh参数。

参数一：是要将其像素复制到画布上的源图片。通常是<img>元素或通过Image()构造函数创建的一张屏幕外图片，但是它还可以是另一个<canvas>元素或者甚至是一个<video>元素。如果指定的<img>或者<video>元素正在加载数据，那么调用drawImage()方法什么也不做。

3个参数时，第二个第三个是待绘制图片的左上角位置x,y坐标。如果需要的话可以对图片进行缩放和旋转。

5个参数时，那另外两个参数分别是宽度和高度。x轴和y轴坐标以及宽度和高度，这4个参数在画布上定义一个目标矩形区域。

9个参数时，还同时指定一个源矩形区域和一个目标矩形区域，并且只会复制源矩形区域内的像素，2~5指定源矩形区域，如果指定的源图片是另一个画布，那么源矩形区域会使用该画布的默认坐标系，并会忽略指定的任何变换。6~9参数指定了图片要绘制的目标矩形区域，该区域是在画布当前坐标系而不是默认坐标系中绘制。

合成

当勾勒线段、填充区域或者复制图片的时候，会想让新绘制的像素点能够在画布中原有像素的上面。如果绘制一个不透明的像素，它们会替换同一位置原有像素，如果绘制的是半透明的像素，那么新像素会和原像素进行合并。原像素可以透过新像素看到，而清晰程序取决于像素的透明度。

合并新的半透明源像素和已有目标像素的过程称为“合成”，上面描述的合成过程也是画布api定义的默认像素合并方式。但是，有时候其实是不希望进行合成的。比如，已经使用半透明像素在画布中绘制了一些内容，这个时候想要进行临时切换，然后，再恢复到原先的状态。这个时候最简单的方法就是：将使用drawImage()方法复制到一张屏幕外画布中。然后，在需要恢复画布的时候，再从屏幕外画布中将内容复制回到屏幕上的画布中。但是，要记住是，保存的像素都是半透明。如果这个时候合成是开启的，它们并不会完全抹除临时绘制的内容。因此，在上述情况下，就需要一种方式将合成关闭：不论源像素是否透明，都绘制源像素并忽略目标像素。

要指定合成方式，可以设置globalCompositeOperation属性。该属性默认值是”source-over”，表示将源像素绘制在目标像素上，对于半透明的源像素就直接合并。

像素操作

调用getImageData()方法，会返回一个ImageData对象，该对象表示画布矩形区域中的原始像素信息。使用createImageData()方法可以创建一个空的ImageData对象。ImageData对象是可写的。因此可以对它进行随心所欲的设置，然后通过putImageData()方法将这些像素复制回画布中。