您的位置: 首页 > 软件教程 > HTML教程专题 > 如何使用HTML5 CANVAS绘制渐变色

如何使用HTML5 CANVAS绘制渐变色

6.0分
出处:jQuery之家 时间:2017-03-10

您可能感兴趣的话题: 绘制渐变色  

核心提示:如何使用HTML5 CANVAS绘制渐变色?

  HTML5 Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。先来看几个canvas渐变色的例子:

如何使用HTML5 CANVAS绘制渐变色

  渐变按照类型来分可以分为两种类型:

  线性渐变

  径向渐变

  线性渐变以线性的模式来改变颜色,也就是水平,垂直或对角方向。

  径向渐变以圆形模式来改变颜色,颜色以圆形的中心向外辐射。

  线性渐变

  正如前面所说,线性渐变以线性的模式来改变颜色。我们可以通过2D上下文的createLinearGradient()方法来创建一个线性渐变。下面是一个例子:

  var canvas = document.getElementById("ex1");

  var context = canvas.getContext("2d");

  var x1 = 0;

  var y1 = 0;

  var x2 = 100;

  var y2 = 0;

  var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

  createLinearGradient()函数有4个参数:x1,y1,x2和y2。这4个参数决定渐变的方向和距离。线性渐变会从第一个点(x1,y1)扩展到第二个点(x2,y2)。

  水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同,例如:

  var x1 = 0;

  var y1 = 0;

  var x2 = 100;

  var y2 = 0;

  var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

  垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同,例如:

  var x1 = 0;

  var y1 = 0;

  var x2 = 0;

  var y2 = 100;

  var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

  一个对角线的线性渐变水平和垂直方向上的参数都不相同,例如:

  var x1 = 0;

  var y1 = 0;

  var x2 = 100;

  var y2 = 100;

  var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

  颜色停止点(Color Stops)

  在上面的例子中,并没有指明线性渐变使用什么颜色。为了指明使用什么渐变颜色,可以在渐变对象上使用addColorStop()方法来指定。例如:

  var linearGradient1 = context.createLinearGradient(0,0,100,0);

  linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');

  linearGradient1.addColorStop(1, 'rgb( 0, 0, 0)');

 

  addColorStop()方法有两个参数。第一个参数是0-1之间的一个数值,这个数值指定该颜色进入渐变多长的距离,第二个参数是颜色值,例子中使用的是rgb()颜色值。

  在上面的例子中为渐变添加了两种颜色。第一种颜色是红色,设置在渐变的开始处。第二种颜色是黑色,设置在渐变的结束处。

  你可以添加通过addColorStop()函数来添加更多的颜色。例如下面的例子添加了三种颜色:

  var linearGradient1 = context.createLinearGradient(0,0,100,0);

  linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)');

  linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255);

  linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)');

  复制代码

  上面的代码在渐变的中间添加了一个蓝色。整个渐变将平滑的从红色过渡到蓝色,在过渡到黑色。

  使用渐变来填充和描边图形

  你可以使用渐变来填充或描边图形。要填充或描边图形可以通过2D上下文的fillStyle或strokeStyle属性来完成。下面是一个示例代码:

  var linearGradient1 = context.createLinearGradient(0,0,100,0);

  linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)');

  linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255);

  linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)');

  context.fillStyle = linearGradient1;

  context.strokeStyle = linearGradient1;

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
JavaScript是基于对象和事件驱动并具... [详细]