绘制渐变图形--Canvas的基本操作

最新推荐文章于 2023-10-19 15:51:43 发布

珊瑚贝

最新推荐文章于 2023-10-19 15:51:43 发布

阅读量700

点赞数

分类专栏：编程开发

本文链接：https://blog.csdn.net/chenzhao635/article/details/104135102

版权

编程开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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(0,0,0,150);
  		lingrad.addColorStop(0, 'black');
  		lingrad.addColorStop(1, 'red');
  		context.fillStyle = lingrad;
  		context.fillRect(10,10,130,130);
}
</script>  
</head>  
<body οnlοad="draw('canvas');">  
<h1>绘制线性渐变</h1>  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>

2.绘制径向渐变

径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。譬如绘制
太阳时，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变。
使用图形上下文对象的createLinearGradient方法绘制径向渐变，该方法的定义如下所示。
context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
该方法使用六个参数，xStart为渐变开始圆的圆心横坐标，yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标, yEnd 为渐变结束圆纵的坐标，radiusEnd为结束圆的半径。
在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到第二个圆的外轮廓处。在设定颜色时，与线性渐变相同，使用的是addColorStop方法进行设定。同样是需要设定0到1之间的浮点数来作为渐变转折点的偏移量。

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>绘制就径向渐变</title>  
<script >
function draw(id) {
	var context = document.getElementById('canvas').getContext('2d');
	var radgrad = context.createRadialGradient(45,45,10,52,50,30);
  		radgrad.addColorStop(0, '#A7D30C');
  		radgrad.addColorStop(0.9, '#019F62');
  		radgrad.addColorStop(1, 'rgba(1,159,98,0)');
    var radgrad2 = context.createRadialGradient(105,105,20,112,120,50);
  		radgrad2.addColorStop(0, '#FF5F98');
  		radgrad2.addColorStop(0.75, '#FF0188');
  		radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
  	var radgrad3 = context.createRadialGradient(95,15,15,102,20,40);
  		radgrad3.addColorStop(0, '#00C9FF');
  		radgrad3.addColorStop(0.8, '#00B5E2');
  		radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
  	var radgrad4 = context.createRadialGradient(0,150,50,0,140,90);
  		radgrad4.addColorStop(0, '#F4F201');
  		radgrad4.addColorStop(0.8, '#E4C700');
  		radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
  
  	context.fillStyle = radgrad4;
  	context.fillRect(0,0,150,150);
  	context.fillStyle = radgrad3;
  	context.fillRect(0,0,150,150);
  	context.fillStyle = radgrad2;
  	context.fillRect(0,0,150,150);
  	context.fillStyle = radgrad;
  	context.fillRect(0,0,150,150);
}
</script>  
</head>  
<body οnlοad="draw('canvas');">  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>