HTML5绘制颜色渐变

最新推荐文章于 2021-08-12 00:25:03 发布

陈小妹

最新推荐文章于 2021-08-12 00:25:03 发布

阅读量2.6k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u011102207/article/details/47340725

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

绘制线性渐变要用到：createLinearGradient，方法如：XXX.createLinearGradient(xStart,yStart,xEnd,yEnd);

xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标，xEnd为渐变结束地点的横坐标，yEnd为渐变起始地点的纵坐标。

绘制完坐标后用addColorStop来设定渐变的颜色，方法如：XXX.addColorStop(offset,color);

offset为所设定颜色离开渐变起点的偏移量，在0-1之间。color为绘制的颜色。

<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>

<body>
<canvas id="jianbian" width="1000" height="1000"></canvas>
<script type="text/javascript">
var c=document.getElementById("jianbian");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,1000,1000);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"rgba(0,0,255,0.5)");
cxt.fillStyle=grd;
cxt.fillRect(0,0,1000,1000);
</script>
</body>
</html>