昨日阅读实践3小时，累计485小时
4.4绘制渐变
线性渐变
var gradient = createLinearGradient(0, 0, 300, 0);
//创建宽度为300Px的水平线性渐变， 这个是渐变对象，然后需要定义渐变的颜色。
addColorStop(stop, color)函数来定义渐变的颜色
gradient.addColorStop(0, "#f00");
gradient.addColorStop(1, "#00f"); //红色到蓝色的渐变
ctx.fillStyle = gradient; //设置fillStyle为当前的渐变对象
ctx.fillRect(0, 0, 400, 300); //绘制渐变图形
到这里才将一个线性渐变的图形绘制完成。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>4.4.1.html</title>
</head>
<body>
<canvas id="myCanvas">Test</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
if(canvas && canvas.getContext){
var ctx = canvas.getContext("2d");
var grad = ctx.createLinearGradient(0, 0, 300, 0);
grad.addColorStop(0, "#f00");
grad.addColorStop(1, "#00f");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 300, 100);
}
</script>
</body>
</html>
绘制径向渐变
grad对象赋值为 ctx.createRadialGradient(200, 200, 50, 200, 200, 200);
后面的fillRect(0, 0, 400, 400); 即可
扫码
京公网安备 11010802022788号
论坛法律顾问：王进律师
知识产权保护声明
免责及隐私声明
发帖
雷达卡
