- createLinearGradient(x,y,x1,y1); 创建线条渐变,x表示渐变开始的x坐标,y表示渐变开始的y坐标,x1表示渐变结束的x坐标,y1表示渐变结束的y坐标。
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1。
使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。
使用createLinearGradient(),创建一个线性渐变。
代码片段:
<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
//1.获取画布
var canvas=document.getElementById("canvas");
//2.创建画布上下文对象
var context=canvas.getContext("2d");
//3.beginPath()
context.beginPath();
//4.设置样式
//创建渐变对象
var linear=context.createLinearGradient(0,50,500,50)
//添加渐变颜色
linear.addColorStop(0,"red");
linear.addColorStop(1,"green");
//设置矩形的填充颜色
context.fillStyle=linear;
//填充渐变
// context.fillStyle=grd;
context.fillRect(10,10,600,300);
</script>
效果图: