Html5Canvas初探学习笔记(9)-渐变

来源：动视网责编：小采时间：2020-11-27 15:12:25

Html5Canvas初探学习笔记(9)-渐变

Html5Canvas初探学习笔记(9)-渐变:本篇继续介绍html5的绘制效果，和之前介绍的不同，本篇介绍的渐变并不是一个状态值，他是之前介绍的fillStyle的一个值。首先来看一个例子：代码如下：var gradient = context.createLinearGradient(50,50,150,150); gradient.ad

推荐度：

点击下载本文 文档为doc格式

导读Html5Canvas初探学习笔记(9)-渐变:本篇继续介绍html5的绘制效果，和之前介绍的不同，本篇介绍的渐变并不是一个状态值，他是之前介绍的fillStyle的一个值。首先来看一个例子：代码如下：var gradient = context.createLinearGradient(50,50,150,150); gradient.ad

本篇继续介绍html5的绘制效果，和之前介绍的不同，本篇介绍的渐变并不是一个状态值，他是之前介绍的fillStyle的一个值。首先来看一个例子：

代码如下：

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

这是一个线性渐变，首先通过createLinearGradient创建线性渐变，四个参数分别为起点的横纵坐标和终点的横纵座标，然后为两个点加入色值，addColorStop的0为起点，1为终点，第二个参数是颜色，可以是rgb也可以是rgba。

前一个是线性渐变，还有弧形渐变，效果如下：

代码如下：

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

createRadialGradient前三个参数为起点圆的圆心横纵坐标，圆半径。后三个参数如下是终点圆圆心坐标和圆的半径。

使用圆形渐变可以绘制出中心开始的渐变，效果如下：

代码如下：

var gradient = context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

起点和终点是正方形的中心，半径不同就可以造出这种效果。

Html5Canvas初探学习笔记(9)-渐变

推荐度：

点击下载本文 文档为doc格式

标签： html5 渐变 (9)

热门焦点

Html5Canvas初探学习笔记(9)-渐变

Html5Canvas初探学习笔记(9)-渐变

Html5Canvas初探学习笔记(9)-渐变

最新推荐

猜你喜欢

热门推荐