1.绘制线性渐变
渐变的概念:渐变是指在填充时从一种颜色慢慢过渡到另外一种的颜色。
绘制线性渐变时,需要使用到LinearGradient
对象。使用图像上下文对象的createLinearGradient
方法创建该对象。该方法的定义如下所示。context.createLinearGradient(xStart,yStart,xEnd,yEnd)
该方法使用四个参数,xStart为渐变起始地点的横坐标,yStart为渐变起始地点的纵坐标,xEnd为渐变结束地点的横坐标,yEnd为渐变结束地点的纵坐标。
使用addColorStop方法绘制颜色
创建了一个使用两个坐标点的LinearGradient对象之后,使用addColorStop方法进行绘制颜色,该方法的定义如下所示。context. addColorStop(offset,color)
该方法使用两个参数——offset和color。Offset为所
设定的颜色离开渐变起始点的偏移量。该参数的值是一
个范围在0到1之间的浮点值,渐变起始点的偏移量为0
,渐变结束点的偏移量为1。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>绘制线性渐变</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
var lingrad = context.createLinearGradient