HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

╰+哭是因爲堅強的太久メ 2022-05-31 09:49 321阅读 0赞

#### 基础渐变三部曲： ####

语法：  
1、创建渐变对象  
ctx.createLinearGradient(x0,y0,x1,y1);  
x0,y0 渐变开始点坐标 x1,y1 渐变结束点坐标

2、设定渐变样式  
addColorStop(value1,”black”);  
addColorStop(value2,”white”);  
value1是渐变开始的地方，value2是渐变结束的地方

3、将设定好的渐变样式赋值使用  
ctx.fillStyle=grd;  
ctx.fillRect(20,20,150,100);

再来段示例代码：

<script>
        window.onload=function () {
            let cans = document.getElementById("seventhC");
            let ctx = cans.getContext("2d");
    
            //径向渐变
            let gra=ctx.createLinearGradient(50,100,250,0);
            gra.addColorStop(0,"#D348FF");
            gra.addColorStop(1,"#43D1FF");
            ctx.fillStyle=gra;
            ctx.fillRect(0,20,300,100);
    
            //文字渐变
            ctx.font="bold 30px KaiTi";
            ctx.fillText("文字渐变效果",100,200);
    
            //圆形渐变
            ctx.beginPath();
            ctx.arc(200,380,100,0,180*Math.PI);
            ctx.closePath();
            gra.addColorStop(0,"#FF6CE5");
            gra.addColorStop(0.3,"#43D1FF");
            gra.addColorStop(1,"#D348FF");
            ctx.fillStyle=gra;
            ctx.fill();
    
        };
    
    </script>

效果图：  
![这里写图片描述][70]

[70]: /images/20220531/74b544d461d74e6c888306ce7dd679bf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，321人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas渐变文字

使用canvas创建渐变文字。效果如下： ![Center][] 代码如下： <!DOCTYPE html> <html> <he

蔚落/ 2022年07月15日 08:36/ 0 赞/ 280 阅读

相关 html5 canvas实例绘制变形图形径向渐变

浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。注

旧城等待，/ 2022年07月14日 07:20/ 0 赞/ 205 阅读

相关【Html5每日练习】canvas绘制线性渐变图形

<html lang="en-US"> <canvas id=myCanvas width=500px height=500px></canvas>

╰+哭是因爲堅強的太久メ/ 2022年06月13日 12:14/ 0 赞/ 267 阅读

相关 canvas（渐变）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

左手的ㄟ右手/ 2022年06月03日 02:45/ 0 赞/ 219 阅读

相关 HTML5 Canvas 开发绘图方法整理【十一、Canvas图形阴影&&文字阴影效果】

关于Canvas 阴影效果分以下四种属性： ctx.shadowBlur 设置阴影的模糊级别 ctx.shadowOffsetX 设置形状与阴影的水平距离。 c

待我称王封你为后i/ 2022年05月31日 09:49/ 0 赞/ 410 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 322 阅读

相关 HTML5 Canvas 开发绘图方法整理【四、canvas曲线图形 / 圆形】

其实在Canvas 中的基本图形就只有两个：直线图形和曲线图形。圆形也算是在曲线图形中，一般画圆的时候必须配套使用 beginPath() 和 closePath

绝地灬酷狼/ 2022年05月31日 08:45/ 0 赞/ 290 阅读

相关 Canvas 线性渐变

一介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下用来设置Canvas的线性渐变： createLinearGradien

女爷i/ 2022年05月12日 00:38/ 0 赞/ 274 阅读

相关 Canvas 圆形渐变

一介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下是设置Canvas圆形渐变的方法： createRadialGradie

迈不过友情╰/ 2022年05月12日 00:38/ 0 赞/ 387 阅读

相关 canvas 颜色渐变

部分语法：createLinearGradient(0,0,250,150)代表其实坐标（0,0）代表终点坐标（250,150） addColorStop(0.5,"

系统管理员/ 2022年04月04日 13:54/ 0 赞/ 306 阅读