html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变

CanvasGradient对象可以实现两种不同形式的颜色渐变,

  1. 线性颜色渐变(从一端到一端的颜色渐变)
  2. 放射性颜色渐变(从一个点或一个圆向外进行辐射性的颜色渐变)

一.首先要创建一个CanvasGradient对象(两种)

1.创建一个作用于canvas指定区域的线性颜色渐变CanvasGradient对像:

createLinearGradient(xStart, yStart, xEnd, yEnd)

参数说明:startX,startY左上角坐标,endX,endY右下角坐标-à形成一个矩形区域

2.创建一个作用于canvas指定区域的线性颜色渐变CanvasGradient对像:

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

参数说明: (xStart, yStart)第一个圆的圆心, radiusStart第一个圆半径,( xEnd, yEnd)第二个圆的圆心坐标, radiusEnd第二个圆的半径,

其作用区域就是第一个圆到第二个圆之间的环状区域

二.实现颜色渐变效果

通过以上的方法创建会返回了一个新的 CanvasGradient 对象,此新对象具备属性或方法是addColorStop(offset, color),

参数: 是一个范围在0.0到1.0之间的浮点值。对于CanvasGradient对象而言,它将整个作用区域看成是一个从0到1的过度,0表示起始点,1表示结束点.

color表示要填充的颜色.

ps:可以一次或者多次调用addColorStop()方法向作用区域中添加指定颜色的渐变点。在绘制成图像时,它就会实现从上一个渐变点的颜色到下一个渐变点的颜色进行过渡的渐变效果。

1.实现线性颜色渐变

 //前面已创建一个矩形fillRect(50,50,250,50)
//创建一个表示线性颜色渐变的CanvasGradient对象,并设置该对象的作用区域就是线段所在的区域 var canvasGradient = ctx.createLinearGradient(50, 50, 250, 50); //在offset为0的位置(即起点位置)添加一个蓝色的渐变 canvasGradient.addColorStop(0, "blue"); //在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变 canvasGradient.addColorStop(0.2, "green"); //在offset为0的位置(即终点位置)添加一个红色的渐变 canvasGradient.addColorStop(1, "red"); //将strokeStyle的属性值设为该CanvasGradient对象 ctx.strokeStyle = canvasGradient; //最后,绘制出当前绘制路径的图形效果 ctx.stroke();

2.实现放射性颜色渐变

 //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形

     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);

     //创建一个表示放射性颜色渐变的CanvasGradient对象
//该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域 var canvasGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 50); //在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变 canvasGradient.addColorStop(0, "blue"); //在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变 canvasGradient.addColorStop(0.5, "green"); //在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变 canvasGradient.addColorStop(1, "red"); //将fillStyle的属性值设为该CanvasGradient对象 ctx.fillStyle = canvasGradient; ctx.fill();

PS:放射性颜色渐变效果一般用于圆形、扇形等从某处开始向周围发散的图形,不过,放射性颜色渐变效果同样可以用于其他图形。它并不依赖于图形,而是依赖于创建CanvasGradient对象时所指定的作用区域。不管是何种图形,它都会在指定的作用区域内实现对应的颜色渐变效果。

html5 canvas中CanvasGradient对象用法的更多相关文章

  1. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  2. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  3. HTML5 canvas中的路径方法

    路径方法 fill()                                填充当前绘图(路径) stroke()                        绘制已定义的路径 begin ...

  4. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  5. HTML5 Canvas中9宫格的坑

    近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...

  6. HTML5 Canvas ( 创建图形对象 ) createImageData

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. HTML5 Canvas中绘制椭圆的几种方法

    1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

  8. HTML5 canvas中的转换方法

    转换方法 scale(scalewidth,scaleheight)                缩放当前绘图至更大或更小 scalewidth         缩放当前绘图的宽度 (1=100%, ...

  9. vue中Promise对象用法

    Promise.all([ 需要异步一起执行的方法---------先做的事 ]).then(res=>{ 后做的事(先做的事已经做好了) }) 举栗子: Promise.all([ this. ...

随机推荐

  1. Murano Weekly Meeting 2015.07.28

    Meeting time: 2015.July.28th 1:00~2:00 Chairperson: Kirill Zaitsev, core from Mirantis Meeting summa ...

  2. 使用Xshell连接服务器

    转载原地址:http://www.server110.com/linux/201308/830.html 1)关于Xshell 网上更多的资料里提到的SSH客户端是putty,因为简单.开源.免费.但 ...

  3. Spark集群安装MySQL环境

    1.修改yum源 鉴于用国外的Yum源,速度比较慢,所以想到将国外的yum源改为国内的Yum源,这里选择使用比较多的阿里云源.具体修改方法可以参考此连接 我们先新建一个新的文件用来存放Yum源: [k ...

  4. 实例化php类的时候如何传参

    当我们实例化一个php类的时候,要怎么传递参数呢?这取决于该类的构造方法. 例: person.class.php <?php class person{ var $name; var $col ...

  5. SpringMVC 的初始化参数绑定

    初始化参数绑定:日期格式 一:首先我们先做一种日期格式的绑定,配置初始化参数绑定和自定义类型转换有着异曲同工之妙 配置步骤如下: 1.我们首先配置applicationContext.xml,进行扫描 ...

  6. Java中的阻塞队列-ArrayBlockingQueue(一)

    最近在看一些java基础的东西,看到了队列这章,打算对复习的一些知识点做一个笔记,也算是对自己思路的一个整理,本章先聊聊java中的阻塞队列 参考文章: http://ifeve.com/java-b ...

  7. JavaScript流程控制语句脑图

    JavaScript流程控制语句脑图 图片是从网上找来的,在这记录一下,以备后面需要的时候查找方便. JavaScript通过规定的语句让有条件的按照一定的方式执行. 分为:循环语句 while do ...

  8. <Android开源库 ~ 1> GitHub Android Libraries Top 100 简介

    转载自GitHub Android Libraries Top 100 简介 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitH ...

  9. Cg shadow of sphere

    参考自:https://en.wikibooks.org/wiki/GLSL_Programming/Unity/Soft_Shadows_of_Spheres using UnityEngine; ...

  10. IDEA导入Web项目

    最近尝试着从eclipse.myeclipse转到idea上面来开发. *注:以下仅适用于普通web项目.*  一.导入已有项目 File>Open...>选取自己的项目位置 二.添加ja ...