线性渐变API:

ctx.createLinearGradient(double x1, double y1, double x2, double y2) 创建一个渐变实例
(x1, y1) 渐变的起始点
(x2, y2) 渐变的终止点
gradient.addColorStop(offset: double, color: string) 向渐变色中增加颜色停止点

offset是介于0~1.0之间的double值,代表颜色停止点在渐变色上的位置;color 是CSS3 颜色字符串。

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
gradient = context.createLinearGradient(0, 0, canvas.width, 0);
// 线性渐变
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow'); context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);

显示效果:

放射渐变API:

ctx.createRadialGradient(x1: number, x2: number, r1: number, x2: number, y2: number, r2: number) 创建一个放射渐变实例

利用两圆分离的原理,可形成放射性扇形。

x1:起始圆的x坐标

x2:起始圆的y坐标

r1:起始圆的半径

x2:终止圆的x坐标

y2:终止圆的y坐标

r2:终止圆的半径

gradient.addColorStop(offset: double, color: string) 向渐变色中增加颜色停止点

同线性渐变。

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
gradient = context.createRadialGradient(canvas.width/2, canvas.height, 10, canvas.width/2, 0, 100); gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow'); context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);

效果:

Canvas入门05-渐变颜色的更多相关文章

  1. Canvas入门(2):图形渐变和图像形变换

    来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...

  2. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  3. Canvas 入门案例

    五.  Canvas 入门案例 1.  canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...

  4. win2d 渐变颜色

    本文告诉大家如何在 win2d 使用渐变颜色 线条渐变 在 UWP 的 Win2d 使用渐变颜色需要 CanvasLinearGradientBrush 做颜色,本文告诉大家如何在 win2d 使用 ...

  5. Canvas入门(3):图像处理和绘制文字

    来源:http://www.ido321.com/997.html 一.图像处理(非特别说明,所有结果均来自最新版Google) 在HTML 5中,不仅可以使用Canvas API绘制图形,也可以用于 ...

  6. Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  7. Canvas入门(3):图像处理和渲染文本

    资源:http://www.ido321.com/997.html 一.图像处理(非特别说明,全部结果均来自最新版Google) 在HTML 5中,不仅能够使用Canvas API绘制图形,也能够用于 ...

  8. canvas入门之时钟的实现

    canvas 入门之作: 三步实现一个时钟: 直接上效果:   step 1  : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...

  9. Canvas入门到高级详解(中)

    三. canvas 进阶 3.1 Canvas 颜色样式和阴影 3.1.1 设置填充和描边的颜色(掌握) fillStyle : 设置或返回用于填充绘画的颜色 strokeStyle: 设置或返回用于 ...

随机推荐

  1. sevlet

    https://blog.csdn.net/Mithrandir_One/article/details/52900425 大家现在做的比较多的基本上就是 web 应用.所以一定要把 sevlet 及 ...

  2. spark性能调优点(逐步完善)

    1.使用高性能序列化类库2.优化数据结构3.对多次使用的RDD进行持久化/CheckPoint4.使用序列化的持久化级别5.Java虚拟机垃圾回收调优 降低RDD缓存占用空间的比例:new Spark ...

  3. markdown编辑器常用命令

    # 标题H1## 标题H2### 标题H3#### 标题H4##### 标题H5###### 标题H5插入java代码: 以```java表示java代码开始,以```表示代码结束 ```javapu ...

  4. 14.django返回展示一张图片

    urlpatterns = [ path('admin/', admin.site.urls), # 使用django返回一张土图片的时候需要间接的访问一个中间接口,是html页面的中的img的src ...

  5. SpringBoot配置文件优先级加载顺序

  6. 3D Computer Grapihcs Using OpenGL - 13 优化矩阵

    上节说过矩阵是可以结合的,而且相乘是按照和应用顺序相反的顺序进行的.我们之前初始化translationMatrix和rotationMatrix的时候,第一个参数都是使用的一个初始矩阵 glm::m ...

  7. linux grep 正则

    grep : 显示匹配行 -v: 反显示 -e 使用扩展正则表达式 黑色字体表明是原生正则表达式 红色字体表明是扩张正则表达式 1.匹配操作符 \: 转义字符串(正则使用扩展字符操作  没有使用-e ...

  8. 读写锁StampedLock的思想

    该类是一个读写锁的改进,它的思想是读写锁中读不仅不阻塞读,同时也不应该阻塞写. 读不阻塞写的实现思路: 在读的时候如果发生了写,则应当重读而不是在读的时候直接阻塞写! 因为在读线程非常多而写线程比较少 ...

  9. 后盾网lavarel视频项目---2、phpstorm显示类中的方法快捷键

    后盾网lavarel视频项目---2.phpstorm显示类中的方法快捷键 一.总结 一句话总结: ctrl + f12 1.npm安装js插件? npm install hdjs 2.phpstor ...

  10. jQuery.parseJSON()

    https://api.jquery.com/jQuery.parseJSON/ https://api.jquery.com/category/deprecated/deprecated-3.0/ ...