canvas画布绘制线性渐变与径向渐变

2023-12-13 17:37| 来源: 网络整理| 查看: 265

线性渐变

线性渐变以线性的模式来改变颜色，也就是水平，垂直或对角方向

addColorStop() 方法有两个参数。第一个参数是0-1之间的一个数值，这个数值指定该颜色进入渐变多长的距离，第二个参数是颜色值

createLinearGradient(x1,y1,x2,y2) 这4个参数决定渐变的方向和距离

水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同

垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同

一个对角线的线性渐变水平和垂直方向上的参数都不相同

Document window.onload = function(){ var canvas=document.querySelector('canvas'); var context=canvas.getContext('2d'); // 声明一个线性渐变对象 var g=context.createLinearGradient(0,0,400,400); // 给渐变对象添加渐变色 g.addColorStop(0,'red'); g.addColorStop(0.2,'orange'); g.addColorStop(0.4,'tomato'); g.addColorStop(0.6,'yellow'); g.addColorStop(0.8,'brown'); g.addColorStop(1,'gray'); // 把渐变对象给到样式填充图形 context.fillStyle=g; // 绘制图形 context.fillRect(0,0,400,400); }

线性渐变.png

径向渐变

径向渐变以圆形模式来改变颜色，颜色以圆形的中心向外辐射

同心圆径向渐变 window.onload = function(){ var canvas=document.querySelector('canvas'); var context=canvas.getContext('2d'); // 声明一个径向渐变对象 // 径向渐变xy小圆心半径径向渐变xy轴大圆心半径 var g=context.createRadialGradient(150,150,50,150,150,150); // 给渐变对象添加渐变色 g.addColorStop(0,'red'); g.addColorStop(0.2,'orange'); g.addColorStop(0.4,'tomato'); g.addColorStop(0.6,'purple'); g.addColorStop(0.8,'lavender'); g.addColorStop(1,'rgb(204, 26, 248)'); // 把渐变对象给到样式填充图形 context.fillStyle=g; // 绘制图形 context.fillRect(0,0,300,300); }

径向渐变.png

【本文地址】

公司简介

联系我们