使用canvas,在js中绘制线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取画笔
var context=canvas.getContext('2d');
// 3.绘制一个线性渐变图形
// 3.1创建一个线性渐变对象
// createLinearGradient参数 0 0 400 400
var l=context.createLinearGradient(0,0,400,400);
// 3.2给渐变图形填充颜色 addColorStop 参数 阈值0-1填充百分比 颜色
l.addColorStop(0,'red');
l.addColorStop(0.25,'blue');
l.addColorStop(0.5,'cyan');
l.addColorStop(0.75,'pink');
l.addColorStop(1,'yellow');
// 4.将渐变对象给到图形填充样式
context.fillStyle=l;
// 5.绘制填充图形
context.fillRect(0,0,400,400);
}
</script>
</head>
<body>
<canvas width="600px" height="600px"></canvas>
</body>
</html>
获取径向渐变则:使用createRadialGradient;
用法:
var g=context.createRadialGradient(200,200,50,200,200,200)
声明一个渐变对象 前三个参数小圆心x轴开始位置 y轴开始位置 半径 后三个参数大圆心x轴开始位置 y轴开始位置 半径(其他于线性渐变一样)
在HTML中也可以设置线性渐变和径向渐变:
线性渐变(默认上到下,或者加to 表明方向,也可以用度数表示方向用deg。)
径向渐变是从一个点向四周的颜色渐变: