HTML5 绘制渐变图像

提问人：刘团圆发布时间：2020-11-14

渐变是指在两种或两种以上的颜色之间进行平滑过渡。对于canvas来说，渐变也是可以实现的。在canvas中可以实现两种渐变效果：线性渐变和径向渐变。

【例题】绘制线性渐变

代码如下：

<!DOCTYPE html>

<htrol>

<head>

<title>Document</title>

</head>

<body>

<canvas id>"canvas" width="400" height="400"></canvas>

</body>

// 获取canvas的ID

var canvas = document.getElementById('canvas');

// 获取上下文

var context = canvas.getContext('2d');

// 获取渐变对象

var gl = context.createlinearGradient(0,0,0,300);

var gl = context.createLinearGradient(0,0,0,300);

// 添加渐变颜色

gl.addGolorStop(0,'rgb(255,255,0)');

gl.addGolorStop(1,'rgb(0,255,255)');

context.fillStyles = g1;

context.fillRect(0,0,400,300);

var g2 = context.createLinearGradient(0,0,300,0);

g2.addColorStop(0,'rgba(0,0,255,0.5)');

g2.addColorStop(1,'rgba(255,0,0,0.5)');

for(var i = 0; i<10;i++)

{

context.beginPath();

context.fillStyle=g2;

context.arc(i*25, I*25, I*10, 0, Math.PI * 2, true);

context,closePath();

context,fill();

}

</script>

</html>

代码需要说明的是：

•createLinearGradient(x1，y1,x2,y2):参数分别表示渐变起始位置和结束位置的横纵坐标。

•addColorStop(offset,color): offset表示设定的颜色离渐变起始位置的偏移量，取值范围是 0-1的浮点值。渐变起始偏移量是0,渐变结束偏移量是1, color是渐变的颜色。

相关视频回答

点击加载更多评论>>