canvas 颜色渐变

系统管理员 2022-04-04 13:54 253阅读 0赞

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

addColorStop(0.5,"green");代表0.5处渐变，颜色为green

<html>
        
        <head>
            <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
            <style type="text/css">
        
            </style>
            <script type="text/javascript">
             function draw(){
                 var canvas =document.getElementById('myCanvas');
              
                 var ctx=canvas.getContext('2d');
                 var lingrad =ctx.createLinearGradient(0,0,250,150);
                 lingrad.addColorStop(0,"blue");
                 lingrad.addColorStop(0.5,"green");
                 lingrad.addColorStop(1,"yellow");
                 
                 ctx.fillStyle=lingrad;
                 ctx.fillRect(10,10,130,130);
             } 
             </script>
            <script type="text/css">
               canvas{border:1px solid black;}
            </script>>
        </head> <body >
            <input type="button" value="渐变" onclick="draw();">
            <p>
            <canvas id="myCanvas" width="150" height="150" ></canvas>
           
        </body>
       
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关说说在 Canvas 中如何填充渐变颜色

渐变颜色填充方式有两种：线性或径向。 1. 线性渐变填充会创建一个水平、垂直或者对角线的填充图案。 2. 径向渐变填充会自中心点创建一个放射状填充图案。 1 线性

我会带着你远行/ 2022年12月12日 13:43/ 0 赞/ 563 阅读

相关 canvas渐变文字

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

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

相关 canvas（渐变）

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

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

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

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

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

相关 Canvas 线性渐变

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

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

相关 Canvas 圆形渐变

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

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

相关 canvas 颜色渐变

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

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

相关 CSS文件颜色渐变

CSS样式： .general-introduction-content-item-number { background

秒速五厘米/ 2022年02月19日 04:29/ 0 赞/ 275 阅读

相关 css样式颜色渐变

style="background: linear-gradient(to right,\0CF,dodgerblue);" 这个是从左到右渐变，第一个参数是从左到右，第二个

落日映苍穹つ/ 2022年01月15日 00:27/ 0 赞/ 293 阅读

相关颜色渐变

公用代码 <view class="flex_w"> <view class="bgrc"> </view> </view> .fle

向右看齐/ 2021年07月25日 02:19/ 0 赞/ 451 阅读