canvas创建线性渐变

最新推荐文章于 2024-08-13 18:46:51 发布

原创最新推荐文章于 2024-08-13 18:46:51 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

Html5_学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用HTML5 canvas元素创建线性渐变效果，从基本概念到实践应用，包括设置渐变方向、颜色停止点和在画布上应用渐变的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<!--		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-->
<html>
   <head>
     <title>Rectangles</title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>线性渐变</title>

      <style>
         #canvas {
            background: #eeeeee;
            border: thin solid cornflowerblue;
         }
      </style>
   </head>

   <body>
      <canvas id='canvas' width='450' height='275'>
         Canvas not supported
      </canvas>

      <script>
      	var canvas=document.getElementById('canvas');
      	context=canvas.getContext('2d');
      	//创建线性渐变  x0 渐变开始点的x坐标,y0渐变开始点的y坐标,x1渐变结束点的x坐标,y1渐变结束点的y坐标
      	gradient=context.createLinearGradient(0,0,0,canvas.height/2);
      	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.rect(0,0,canvas.width,canvas.height);
      	//填充渐变色
      	context.fill();
      </script>
   </body>
</html>

演示地址：http://sandbox.runjs.cn/show/pwalehz5