canvas中的渐变

最新推荐文章于 2023-05-24 14:32:14 发布
最新推荐文章于 2023-05-24 14:32:14 发布
阅读量162 收藏
点赞数
分类专栏： 技术
原文链接：https://www.colorgg.com
版权

线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //0,0 第一个点  300,300 第二个点
        var myliGra=ctx.createLinearGradient(0,0,300,300);
        //上述线条的0%位置为pink
        myliGra.addColorStop(0,"pink");
        //上述线条的100%位置为pink
        myliGra.addColorStop(1,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.fillRect(0,0,300,300);

    
    </script>
</body>
</html>

 

给圆填充好看的线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //0,0 第一个点  300,300 第二个点
        var myliGra=ctx.createLinearGradient(0,0,300,300);
        //给渐变分配颜色
        myliGra.addColorStop(0,"rgb(255,175,74)");
        myliGra.addColorStop(.5,"rgb(255,191,196)");
        myliGra.addColorStop(1,"rgb(173,216,230)");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.arc(150,150,150,0,2*Math.PI,true);
        ctx.fill();

    
    </script>
</body>
</html>

 

 

改变线性渐变的角度，可以通过改变两个点的坐标来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //0,0 第一个点  300,300 第二个点
        var myliGra=ctx.createLinearGradient(150,0,150,300);
        //上述线条的0%位置为pink
        myliGra.addColorStop(0,"pink");
        //上述线条的100%位置为pink
        myliGra.addColorStop(1,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.fillRect(0,0,300,300);

    
    </script>
</body>
</html>

 

径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //150,150,0 第一个圆的圆心和半径
        //150,150,150 第二个圆的圆心和半径
        var myliGra=ctx.createRadialGradient(150,150,0,150,150,150);
        //给渐变分配颜色
        myliGra.addColorStop(1,"pink");
        myliGra.addColorStop(0,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.arc(150,150,150,0,2*Math.PI,true);
        ctx.fill();

    
    </script>
</body>
</html>

 

 

径向渐变的角度调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //150,150,0 第一个圆的圆心和半径
        //150,150,150 第二个圆的圆心和半径
        var myliGra=ctx.createRadialGradient(150,30,0,150,150,150);
        //给渐变分配颜色
        myliGra.addColorStop(1,"pink");
        myliGra.addColorStop(0,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.arc(150,150,150,0,2*Math.PI,true);
        ctx.fill();

    
    </script>
</body>
</html>

 

Globalizationa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 线条渐变追逐_canvas之渐变
weixin_33918358的博客
01-12 500
timg (1).jpg渐变 Gradients可以用线性或者径向的渐变来填充或描边赋给图形的 fillStyle 或 strokeStyle 属性。渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。使用渐变对象，必须使用两种或两种以上的停止颜色。以下有两种不同的方式来设置Canvas渐变：createLinearGradient(x1, y1, x2, y2) ...
android canvas画渐变背景,View绘制系列(13)-Canvas渐变属性绘制
weixin_28782823的博客
05-26 2841
Canvas渐变属性绘制五颜六色，七彩缤纷。有时候我们的UI设计稿也极尽色彩之能，比如下图这样： 这种渐变效果我们能画吗？不得不说，Android系统的基础构架还是很强大的，我们可以使用LinearGradient进行绘制，与其相关的还有SweepGradient，RadialGradient.LinearGradient,SweepGradient及RadialGradient均为Shader子...
Canvas 填充渐变
qq_17627195的博客
07-25 1394
注渐变的方向是从x1y1到x2y2，如果y相同，那就是从左到右渐变，如果x相同，就是从上到下渐变，斜着渐变就需要自己调整两个位置的坐标了。value坐标来描述渐变的位置，取值0~1（可以理解成整个渐变是0-100%的位置，从而设定在百分比位置的颜色）Canvas的渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色。x1、y1表示渐变开始圆心的坐标，r1表示渐变开始圆心的半径。x2、y2表示渐变结束圆心的坐标，r2表示渐变结束圆的半径。...
canvas渐变
qq_33721778的博客
01-05 3507
canvas设置渐变的两种方式： createLinearGradient(x,y,x1,y1) ： 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) ： 创建一个径向/圆渐变 在线试一试 createLinearGradient(x,y,x1,y1) x：渐变开始点的 x 坐标 y：渐变开始点的 y 坐标 x1：渐变结束点的 x 坐标 y1：渐变结束点的 y 坐标 代码如下： const c = document.getElementById("myCanvas
Canvas 圆形渐变
iteye_5722的博客
04-07 312
一 介绍 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下是设置Canvas圆形渐变的方法： createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 使用渐变，设置f...
【绘制】HTML5 Canvas 中渐变色和图案（图文、示例）
苏一恒
08-26 1544
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 目录 渐变色 线性渐变 用法 代码示例 效果演示 放射渐变 线性渐变和放射渐变的演示链接 图案 说明 ...
Canvas渐变文字
qq_16159433的博客
05-24 631
【代码】Canvas渐变文字。
说说在 Canvas 中如何填充渐变颜色
读万卷书，行万里路
10-07 3505
渐变颜色填充方式有两种：线性或径向。 线性渐变填充会创建一个水平 、 垂直或者对角线的填充图案。 径向渐变填充会自中心点创建一个放射状填充图案。 1 线性渐变 1.1 线性水平渐变 （1）基本形状 Steve Fulton 与 Jeff Fulton 举了一个示例，来说明如何设置线性水平渐变。 //创建渐变对象 var gr = context.createLinearGradient(0, 0, 100, 0); //颜色断点 gr.addColorStop(0, 'rgb(255,0,0)');
html canvas颜色渐变色,html5 canvas 颜色渐变
weixin_34790851的博客
06-15 184
function canvasOperator() {var myCanvas = document.getElementById('myCanvas');var context = myCanvas.getContext('2d');//line gradientsvar lineGradients = context.createLinearGradient(0, 0, 500, 0);lin...
HTML5 Canvas彩色渐变背景动画效果
06-11
在这个例子中，`createGradient`函数根据鼠标位置创建了一个径向渐变，`draw`函数则不断地重绘整个画布，每次使用新的渐变填充，从而实现了动画效果。`requestAnimationFrame`用于平滑地更新动画，确保浏览器以最佳...
canvas画渐变线条
08-12
在本篇文章中，我们将探讨如何利用Canvas API来创建渐变线条，提升网页图形的美观度。 首先，Canvas API是HTML5引入的一个特性，它提供了一个二维绘图上下文，可以通过调用其提供的方法进行绘图操作，如绘制线条、...
Canvas渐变时间效果
08-14
在这个项目中，我们将结合JavaScript的Date对象和Canvas API，实现一个实时刷新系统时间并展示在画布上的渐变效果。 首先，我们需要在HTML文档中创建一个Canvas元素。在`<body>`标签内添加以下代码： ```html ...
像素渐变背景Canvas动画
07-24
在“像素渐变背景Canvas动画”中，开发者使用Canvas的绘图函数来生成一种全屏的、不断变化的颜色渐变效果，为用户带来动态的视觉体验。 实现这种动画的关键在于理解CSS颜色渐变和Canvas的绘图方法。在CSS中，我们...
HTML中canvas径向渐变的使用方法以及代码的编写
03-13
该资源是HTML中canvas径向渐变的使用方法以及代码的编写如果您需要的话可以进行下载,只为您能对canvas径向渐变有更加深入的了解.
注册安全工程师预报考人员管理台账.xlsx
07-04
注册安全工程师预报考人员管理台账.xlsx
6-1机械波的产生和传播.ppt
最新发布
07-04
6-1机械波的产生和传播
2-3.ppt
07-04
2-3
9-3电通量 高斯定理.ppt
07-04
9-3电通量 高斯定理
canvas图片渐变倒影
05-24
2. 在canvas中创建一个渐变对象，用于创建倒影效果。 3. 将渐变对象应用到倒影区域的矩形中。 4. 使用clip()函数裁剪出倒影区域。 5. 将裁剪后的倒影区域翻转并绘制到canvas中，使其成为倒影效果。 以下是一个简单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值