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. mysql 8 修改root 密码

    主要参考:https://dev.mysql.com/doc/refman/8.0/en/resetting-permissions.html 需要注意的是创建文件的时候需要保存为 utf-8 无 B ...

  2. script脚本中写不写$(document).ready(function() {});的区别

    $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标签里执行的代码调用 ...

  3. 通过进入单用户模式解决linux中的rc.local修改后无法启动的问题

    问题:本想将teamviewer这个软件随linux自启动,所以将其启动命令放在rc.local中,但是重启后发现linux启动不起来了,系统前面都是正常启动的,就是无法进入帐户登陆界面,无法输入ro ...

  4. 【frame】找上一层

    第一种:window.parent第二种:window.top 貌似两种都行 然后找上一层iframe里面的js函数可以这么写: window.parent.functionName(param1, ...

  5. 微信小程序电商实战-商品详情(上)

    先看一下今天要实现的小程序商品详情页吧!   商品详情.gif 本期我们要实现小程序商品详情页的头部标题.头部轮播.商品详情浮动按钮和商品内页布局. 一.设置头部标题 如上图所示,头部标题是商品详情 ...

  6. display详细说明

    display:block,inline,inline-block区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可 ...

  7. ajax提交 返回值为undefined

    easyui  form 表单提交成功,但是返回值为undefined,原因是返回值不是json格式,是字符串的格式,那么解决办法就是把其转化成json格式 示例: $(function () { / ...

  8. 转:解决Arcsde用户锁定的问题

    采用arcgis平台做GIS应用的人,可能偶尔碰到sde用户锁定(Arccatalog 或应用程序异常退出的时比较多)的问题,往往咱们解决的办法是重启sde服务.如果一个服务器上有多个连接时,重启服务 ...

  9. Limesurvey-2.55 (Ubuntu 16.04)

    平台: Ubuntu 类型: 虚拟机镜像 软件包: limesurvey-2.55 business intelligence commercial limesurvey open-source 服务 ...

  10. javaWeb上移下移(SpringMVC+Mabits+MySql)

    文章已移至:https://blog.csdn.net/baidu_35468322/article/details/79643356 移动之前: 移动之后: 1.控制层 /** * 修改排序 * * ...