HTML5 Canvas 起步(3) - 颜色与渐变(2)
作者:xujiwei 来源:xujiwei博客 时间:2009-06-08 12:58:00
2. Canvas 中的渐变
WHATWG 的 Canvas 规范中规划了两种渐变模式,一种是线性渐变,另一种是径向渐变。如果需要在 Canvas 中使用渐变,首先要根据你所要创建的渐变模式来调用 Context 的相应方法来创建一个渐变对象,这个对象就是用来控制渐变的效果。
2.1 线性渐变
线性渐变使用 Canvas Context 的 createLinearGradient 方法创建,它的定义如下:
CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
通过 (x0, y0) 与 (x1, y1) 指定渐变的开始位置与截止位置。当然,创建完线性渐变对象并不能完全开始使用渐变对象,你需要给它指定渐变的起始色以及终止色。CanvasGradient 对象有一个 addColorStop 方法用来添加颜色。
gradient.addColorStop(offset, color)
在线性渐变中,偏移量 offset 只能取 0 或 1,分别代表线性渐变的起始色和终止色。color 参数的值可以参考上面说明的颜色格式。
例如,我要创建一个从 (20, 20) 到 (150, 150) 的一个渐变,从绿色渐变到白色透明,就可以按照下面的代码来创建 CanvasGradient 对象:
var gradient = ctx.createLinearGradient(20, 20, 150, 150);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'rgba(255,255,255,0)');
创建完渐变对象后,可以直接将它赋值给 CanvasContext 的 fillStyle 属性或 strokeStyle 属性,用来指定填充的渐变色或画边框的渐变色。也就是说,CanvasGradient 对象的用法等同于颜色参数值,通过赋值给 Context 对象来起作用。
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Spring+Mybatis+Mysql搭建分布式数据库访问框架的方法
![](https://img.aspxhome.com/file/2023/7/77367_0s.png)
JavaScript/TypeScript中==和===的区别详解
![](https://img.aspxhome.com/file/2023/7/135467_0s.png)
用于分页的两个Asp函数
vue中的循环对象属性和属性值用法
![](https://img.aspxhome.com/file/2023/8/133028_0s.jpg)
Python 程序员必须掌握的日志记录
Python全局变量关键字global的简单使用
如何利用Pyecharts可视化微信好友
![](https://img.aspxhome.com/file/2023/0/86450_0s.gif)
使用MySql和php出现中文乱码的解决方法
Golang使用lua脚本实现redis原子操作
![](https://img.aspxhome.com/file/2023/7/101057_0s.png)
跟老齐学Python之通过Python连接数据库
使用python itchat包爬取微信好友头像形成矩形头像集的方法
![](https://img.aspxhome.com/file/2023/7/131267_0s.jpg)
python程序的打包分发示例详解
Python实战之ATM取款机的实现
![](https://img.aspxhome.com/file/2023/3/80643_0s.jpg)
IN&EXISTS与NOT IN&NOT EXISTS 的优化原则小结
MySQL5.6安装图解(windows7/8_64位)
![](https://img.aspxhome.com/file/2023/3/87123_0s.jpg)
Python 虚拟机字典dict内存优化方法解析
![](https://img.aspxhome.com/file/2023/2/93562_0s.png)
MySQL主从复制配置心跳功能介绍
python入门课程第四讲之内置数据类型有哪些
![](https://img.aspxhome.com/file/2023/7/113157_0s.png)