HTML5画布基本图形的填充样式实现

它是HTML5中的一个新标签，用于绘制图形。事实上，这个标签与其他标签相同。它的特点是，标签可以得到canvasrenderingcontext2d对象。我们可以通过Javaｓｃｒｉｐｔ脚本控制对象。

它只是一个绘图容器，除了id、类、样式等属性外，还有高度和宽度属性。主要有三个步骤来绘制：

1。获取与元素对应的DOM对象，这是一个画布对象；
2。getContext（）的画布上的对象的方法调用，并得到canvasrenderingcontext2d对象。
三.调用canvasrenderingcontext2d对象绘制。

填充样式

此外，设置颜色，设置fillStyle和strokeStyle是用在前面还可以设置其他的填充方式。这里是填充颜色，例如：

线性梯度

使用步骤
（1）VaR GRD = context.createlineargradient（xStart，ystart，Xen，yEnd）创建一个线性渐变，设置起始和终点坐标；
（2）grd.addcolorstop（停止、颜色）添加颜色渐变，停是0 ~值1。
（3）背景。fillStyle＝GRD将分配到语境。

径向梯度
这种方法类似于线性梯度使用法，只有第一步所接收到的参数是不同的。
Var GRD = context.createRadialGradient (x0, Y0, R0, x1, Y1, R1); receive the coordinates and circular radius of the starting center, and the coordinates of the center of the end and the radius of the circle.

位图填充
CreatePattern（IMG，重复式）充满了图片，并重复样式可以重复，repeat-x，纵向重复，没有重复。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的画布document.getelementbyid（画布）；
VaR上下文= canvas.getcontext（2D）；

线性渐变
VaR context.createlineargradient GRD =（10, 10, 100，350）；
Grd.addColorStop（0，# 1ef9f7 ）；
grd.addcolorstop（0.25，# fc0f31 ）；
grd.addcolorstop（0.5，# ecf811 ）；
grd.addcolorstop（0.75，# 2f0af1 ）；
Grd.addColorStop（1，# 160303 ）；
context.fillstyle = GRD；
（1010100350）context.fillrect；

径向渐变
VaR context.createradialgradient GRD =（325, 200, 0，325, 200, 200）；
Grd.addColorStop（0，# 1ef9f7 ）；
grd.addcolorstop（0.25，# fc0f31 ）；
grd.addcolorstop（0.5，# ecf811 ）；
grd.addcolorstop（0.75，# 2f0af1 ）；
Grd.addColorStop（1，# 160303 ）；
context.fillstyle = GRD；
（15010350350）context.fillrect；

位图填充
无功bgimg =新的图像（）；
bgimg.src =背景图片；
Bgimg。指针函数（）{
VAR模式= context.createpattern（bgimg，重复）；
context.fillstyle =模式；
背景。strokeStyle =# f20b0b ；
（600, 100, 200200）context.fillrect；
（600, 100, 200200）context.strokerect；
}；
结果如下：
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。