使用HTML5Canvas为图片填充颜色和纹理-

填充颜色

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

1.基本颜色
2.渐变颜色（又分为线性渐变与径向渐变）

我们一个个来看。

填充基本颜色
Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如:

Javascript Code复制内容到剪贴板

context.fillStyle = "red";

下面是出自 HTML4 规范的可用颜色字符串值列表，共十六个。由于 HTML5 没有修改专属的颜色，HTML4 的颜色都可以在 HTML5 中正确显示。
添加渐变线：

Javascript Code复制内容到剪贴板

var grd = context.createLinearGradient(xstart,ystart,xend,yend);

为渐变线添加关键色(类似于颜色断点)：

Javascript Code复制内容到剪贴板

grd.addColorStop(stop,color);

这里的stop传递的是 0 ~ 1 的浮点数，代表断点到(xstart,ystart)的距离占整个渐变色长度是比例。

应用渐变：

Javascript Code复制内容到剪贴板

context.fillStyle = grd;   
context.strokeStyle = grd;

写个代码来看看。

Javascript Code复制内容到剪贴板

   
   
   
       
       
   
   
   
       
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
       
   

   
   

运行结果：
这里配合两个补充函数再举一例。

绘制矩形的快捷方法

Javascript Code复制内容到剪贴板

fillRect(x,y,width,height)、stroke(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。   
   
   
   
       
       
   
   
   
       
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
       
   

   
   

运行结果：
添加渐变圆：

Javascript Code复制内容到剪贴板

vargrd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

为渐变线添加关键色(类似于颜色断点)：

Javascript Code复制内容到剪贴板

grd.addColorStop(stop,color);

应用渐变：

Javascript Code复制内容到剪贴板

context.fillStyle = grd;   
context.strokeStyle = grd;

线性渐变是基于两个端点定义的，但是径向渐变是基于两个圆定义的。
我们把示例7-2改写一下。

Javascript Code复制内容到剪贴板

   
   
   
       
       
   
   
   
       
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
       
   

   
   

运行结果：
为Image对象指定图片源

代码如下：

Javascript Code复制内容到剪贴板

var img = new Image();    //创建Image对象
img.src = "8-1.jpg";    //为Image对象指定图片源

扩展：HTML中的相对路径
&＃39;./目录或文件名&＃39; 或者 &＃39;目录或文件名&＃39; 是指当前操作的文件所在目录的路径
&＃39;../目录或文件名&＃39; 是指当前所操作的文件所在目录的上一级目录的路径

之后填充纹理：

Javascript Code复制内容到剪贴板

var pattern = context.createPattern(img,"repeat");   
context.fillStyle = pattern;

我们直接看一段完整的程序，这里我要重复填充这个萌萌的长颈鹿作为纹理。需要注意的是，选择图片时一定要选择那种左右互通，上下互通的图片做为纹理，这样看上去才不会有不自然的短接处。

下面提供代码。

Javascript Code复制内容到剪贴板

   
   
   
       
       
   
   
   
       
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
       
   

   
   

运行结果：

以上就是使用HTML5 Canvas为图片填充颜色和纹理的详细内容，更多请关注 第一PHP社区 其它相关文章！