使用HTML5画布填充的颜色和纹理的教程

填充颜色

艺术离不开色彩。今天，让我们来介绍一下填充色，体验色彩的魅力。
填充颜色分为两种主要类型：

1。基本颜色
2。渐变色（又分为线性梯度和径向梯度）

让我们一个一个地看。
填充基本颜色
帆布FillStyle属性用于设置基本颜色和形状的canvas.fillstyle填料使用一个简单的颜色名称。它看起来很简单，例如：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =红色；

以下是从HTML4规范可用彩色字符串值列表，共有十六。因为HTML5不修改的专属颜色，在HTML4的颜色可以在HTML5中正确显示。
所有这些颜色值可用于strokeStyle属性和fillStyle属性。
好吧，让我总结的基本颜色填充的方法：（也可用于strokeStyle属性）
（1）填充颜色字符串。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =红色；

（2）用116位数字字符串字符串填充。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =# FF0000；

（3）用数字串的116位字符串填充它。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =# F00 ；

（4）使用RGB（）方法设置颜色。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =RGB（255,0,0）；

（5）使用rgba（）来设置颜色的方法。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =RGBA（255,0,0,1）；

该方法的最后一个参数是alpha值传递的，透明度范围为1（不透明）~ 0（透明）。
（6）使用HSL（）来设置颜色的方法。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =HSL（0100，50%）；

HSL三渠道代表的颜色相色（H）、饱和度（S）和明度（L）。
（7）使用HSLA（）来设置颜色的方法。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle =低合金高强度（0100，50%，1）；

代码的7行以上，充满了# FF0000这个红色的。
填充渐变的形状
有创建渐变填充画布上的两个基本选择：线性或径向线性梯度创建水平、垂直或对角线填充图案。径向渐变创建从中心点径向填充。填充梯度分为三个步骤：添加渐变线，添加关键颜色梯度线，并应用梯度。这里有一些例子，他们。
线性梯度
三步策略：
添加渐变线：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR GRD = context.createlineargradient（xStart，ystart，Xen，yEnd）；
为渐变线添加关键颜色（类似于颜色断点）：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
Grd.addColorStop（停、颜色）；
这里的停止通过0 ~ 1浮点数，并且距离断点（xStart，ystart）是整个梯度的比例。

应用梯度：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle = GRD；
context.strokestyle = GRD；
编写一个代码来查看它。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

填充线性渐变

你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

（200100400400）context.rect；

添加渐变线
VaR GRD = context.createlineargradient（200300600300）；

添加颜色断点
Grd.addColorStop（0，黑）；
grd.addcolorstop（0.5，白）；
Grd.addColorStop（1，黑）；

应用程序渐变
context.fillstyle = GRD；

Context.fill（）；

}

运行结果：
我认为有必要做一个图表，便于每个人一次了解渐变。
为了便于理解，建议将渐变线视为有向直线，如果熟悉ps和其他绘图工具，应该使用渐变颜色设置来充分理解。
这里的梯度线的起始点和终点不一定在图像中，并且颜色断点的位置是相同的，但是如果图像的范围大于梯度线，则最接近终点的断点的颜色自动填充在渐变线的范围内。
这里还有一个例子，有两个互补函数。

绘制矩形的快速方法

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
用（x，y，宽度，高度），行程（X，Y，宽度，高度）。这两个函数可以看作是一个组合的矩形（）和填充（）和（）和（）直接中风。因为rect（）是规划的路径，而这两种方法真正的现实。

填充线性渐变

你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

添加渐变线
VaR GRD = context.createlineargradient（100300700300）；

添加颜色断点
Grd.addColorStop（0，橄榄）；
grd.addcolorstop（0.25，栗色）；
grd.addcolorstop（0.5，水）；
grd.addcolorstop（0.75，倒挂金钟）；
grd.addcolorstop（0.25，绿色）；

应用程序渐变
context.fillstyle = GRD；
context.strokestyle = GRD；

context.strokerect（20050300,50）；
context.strokerect（200100150,50）；
context.strokerect（200150450,50）；

context.fillrect（200300300,50）；
context.fillrect（200350150,50）；
context.fillrect（200400450,50）；

context.fillrect（0550800,25）；

}

运行结果：
这两个页面是水平渐变，但是很明显，线性渐变不一定是水平的，方向可以是任意的，方向是由渐变线的端点设置的。

径向渐变
三步策略也是一样，但这只是第一步。
添加渐变圆：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR（x0，y0 = context.createradialgradient GRD，R0，X1，Y1，R1）；

为渐变线添加关键颜色（类似于颜色断点）：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
Grd.addColorStop（停、颜色）；
应用梯度：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.fillstyle = GRD；
context.strokestyle = GRD；
线性梯度是在两个端点的基础上定义的，但径向梯度是基于两个圆定义的。
让我们重写示例7-2。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

填充径向渐变

你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

添加渐变线
VaR GRD = context.createradialgradient（400300100400300200）；

添加颜色断点
Grd.addColorStop（0，橄榄）；
grd.addcolorstop（0.25，栗色）；
grd.addcolorstop（0.5，水）；
grd.addcolorstop（0.75，倒挂金钟）；
grd.addcolorstop（0.25，绿色）；

应用程序渐变
context.fillstyle = GRD；

（100100600400）context.fillrect；
}

运行结果：
如何搭配感觉hellip；hellip；好吧，这就是所谓的艺术。
CreateRadialGradient（x0，y0，R0，X1，Y1，R1）；该方法指定开始和结束的径向梯度，即范围，两圆之间的渐变。
总之，在这节课中，我们学习了FillStyle属性和方法，createlineargradient（），（），createradialgradient addcolorstop（），用（），strokerect等，并介绍了基本的颜色填充，详细的线性渐变和径向渐变。
好了，现在学会了色彩，所以利用色彩，画出属于自己的艺术。

填充纹理

对createpattern简介（）
事实上，纹理图案的重复，和填充图案是由createpattern初始化（）函数，它需要在createpattern两参数（IMG，重复的风格），第一个是图像对象实例，第二个参数是字符串类型，说如何显示的形状重复模式。此功能可用于加载图像或整个画布上填充图案的形状。
图像填充有4种类型：

重复1行。平面：重复；
在2个重复。X轴：repeat-x；
在Y轴：垂直重复3重复；
4。没有重复使用：不重复；

事实上，对createpattern第一个参数（）也可以被传递到一个画布对象或视频对象。在这里，我们只解释图像对象，而我们其余的人尝试它们。
创建并填充模式
首先，看看如何加载图像：

创建图像对象
指定图像对象的图片源

代码如下：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR img =新（图像）； / /创建一个图像对象
img.src =8-1。jpg； / /指定图像中物体的图像源

扩展：HTML中的相对路径
目录或文件名或目录或文件名是指目录当前操作的路径。
目录或文件名是指目录中文件目录路径的当前操作。

然后填充纹理：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VAR模式= context.createpattern（IMG，重复）；
context.fillstyle =模式；

我们看到了一个完整的程序，在这里我想重复这个可爱的长颈鹿作为纹理填充。应该注意的是，当选择图片时，我们必须选择左右两侧的交互和顶部和底部的图片作为纹理，这样看起来就不会有一个不自然的捷径。
提供以下代码。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

填充纹理

你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

VaR img =新的图像（）；
img.src =8-1 .webp；
img.onload =函数（）{
VAR模式= context.createpattern（IMG，重复）；
context.fillstyle =模式；
（00800600）context.fillrect；
}

}

运行结果：
在这里，我们使用图像的onload事件，其功能是预加载的图片，即图片后加载，这是紧接着由函数的代码体。这是必要的。如果没有写，画布将显示黑屏。浏览器无法找到图片，因为纹理被填满而不等待图像被加载。
在这里使用重复，童鞋也可以试着用其他三种数值来看看效果有什么不同。你也可以找其他的图片来填充，看看效果如何。