canvas 颜色渐变

最新推荐文章于 2024-01-13 00:00:00 发布
最新推荐文章于 2024-01-13 00:00:00 发布
阅读量534 收藏
点赞数
分类专栏： html+css+js 文章标签： createLinearGradient addColorStop
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42528089/article/details/85052978
版权

 部分语法：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>

 

2021乐乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript全解析——canvas 绘制变换和渐变
千锋教育
05-05 1066
○语法 : 工具箱.createLinearGranient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)●语法 : ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)●注意 : canvas 的缩放不仅仅是对内容的缩放, 更是对画布的缩放。○根据我们上面的预设, 这个红框圈出来的位置才是真实的完整渐变。●注意 : 渐变不是根据你的图形而制定的, 而是根据画布制定的。●注意 : 渐变是包含开始圆位置, 但是不包含终止圆的位置的。
canvas 渐变
LiHang1234567777的博客
07-16 2218
canvas设置渐变线条渐变径向/圆渐变文本渐变.font="大小，字体".fillText()基本方法就这样，挺简单的。
canvas基础—实现颜色渐变
Jacgu的博客
05-30 2919
canvas基础—实现颜色渐变 1、 在canvas中主要有两种渐变方式：线条渐变和一个径向/圆渐变。分别利用createLinearGradient(x,y,x1,y1)和createRadialGradient(x,y,r,x1,y1,r1)来创建。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
canvas设置渐变色文字（线性、径向）
最新发布
大剑师兰特的GIS世界
01-13 2463
如何使用canvas设置渐变色文字呢？这里分为设置线性渐变（createLinearGradient）和径向渐变（createRadialGradient）。请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
Canvas颜色渐变效果
arvin_top的博客
05-02 2245
canvas渐变对象 •canvas提供了两个对象来创建渐变，渐变可以填充在矩形、文本、线条等。 •createLinearGradient(x,y,x1,y1)：创建线性渐变 •createRadialGradient(x,y,r,x1,y1,r1)：创建径向/圆渐变 渐变方法 •addColorStop(floatx,”color”)方法:指定颜色停止。必须使用两种或以上
JavaScript canvas绘制渐变颜色的矩形
10-15
在这个场景中，我们将重点讨论如何利用Canvas API绘制一个渐变颜色的矩形。渐变颜色的实现是通过创建一个线性渐变对象，并将其设置为填充样式(fillStyle)。 首先，我们需要获取到`<canvas>`元素并创建2D渲染上下文...
js+HTML5实现canvas多种颜色渐变效果的方法
10-24
主要介绍了js+HTML5实现canvas多种颜色渐变效果的方法,涉及html5属性的相关技巧,需要的朋友可以参考下
HTML5 Canvas彩色渐变背景动画效果
06-11
然后，定义颜色渐变的起始和结束颜色，以及鼠标的当前位置。当鼠标移动时，可以更新这些值： ```javascript var gradientColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; var startX,...
unity text文本颜色渐变
09-30
3. 使用Material和Shader：为了实现颜色渐变，我们需要自定义Material（材质）并应用一个支持颜色渐变的Shader。Unity的标准UI Shader不支持颜色渐变，因此我们需要使用第三方Shader或者编写自己的Shader。例如，你...
canvas之实现渐变颜色
hstjbj的博客
11-18 1257
线性渐变 //获取画布。 相当于拿到了绘画的一张纸 var cas = document.getElementById('cvs'); //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔 var pencil = cas.getContext('2d'); //开始绘画 pencil.beginPath(); /...
canvas学习之渐变---createRadialGradient
昨天丶今天丶明天的的博客
08-14 6817
在canva0s画出的矩形, 圆形, 线条, 文本等的各种形状中，可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果，实现效果如下图所示 createRadialGradient(x,y,r,x1,y1,r1) - 创建(圆形)梯度渐变 addColorStop(index,color)方法指定颜色停止，参数使用index来描述，index范围在0-1之间，0.5即给定横纵...
【绘制】HTML5 Canvas 中渐变色和图案（图文、示例）
苏一恒
08-26 1570
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 目录 渐变色 线性渐变 用法 代码示例 效果演示 放射渐变 线性渐变和放射渐变的演示链接 图案 说明 ...
html5 Canvas画图4：填充和渐变
weixin_30702413的博客
11-30 346
一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。 ctx.fillStyle = '颜色'; 默认的填充样式是不透明的黑色 提问：未闭合的路径可以填充吗？ 可以。Canvas会从你当前路径的终点直接连接到起...
用H5 canvas实现唯美渐变色块的绘制
綦枫Maple的博客
12-21 4002
随着Web前端的不断发展，我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果。一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能。今天我们来讲述一下简单H5 canvas 渐变色块的绘制，希望给有需要的读者一定的启发，day day up together。
[实验]在同一个 canvas 元素中绘制不同颜色的图形
热门推荐
shao_winds的专栏
06-19 1万+
声明： 这是我第一次写正式的技术博客，作为大一学生，实在不能保证写出高质量的技术博客，只是想把自己遇到的问题和对一些事情的看法拿来和大家分享，请大神们果断批评指正，请比我还菜的新手们也多多思考。大家有问题多多交流，“闻道有先后，术业有专攻”，大家共同努力，共同进步！   实验背景： 在做一个 HTML 5 的一个游戏项目的时候，想在同一个 canvas 元素中绘制多个具有不同颜色的图画，但
Canvas画图设置渐变色
xiangyunwan的专栏
02-24 6545
1、线形图设置填充色为渐变色方法： /** * Draws the provided path in filled mode with the provided drawable. * * @param c * @param filledPath * @param drawable */ protected void drawFilledPath(Canvas c, Path fil
HTML渐变多小圆圈,HTML5中的Canvas（径向渐变）
weixin_39692045的博客
05-30 297
说明完了线性渐变，我们再来看看径向渐变，其实我觉得两者是一回事儿……只不过径向渐变的浏览器兼容性更糟糕一些(现在已经好多了)，为了不出洋相，我们还是要多知道一些。什么是径向渐变又要解释一下什么叫径向渐变，其实就是环形的渐变了，由圆心(或者是较小的同心圆)开始向外扩散渐变的效果，听着有些抽象，往下看图一下子就明白了。线性渐变指定了起点和终点，径向渐变则指定了开始的结束园的圆心和半径。这里使用crea...
canvas创建渐变的字体
u012028371的博客
08-11 3389
Your browser does not support the HTML5 canvas tag. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="20px Georgia"; ctx.fillText("Hello World!",10,5
Canvas的绚烂起点
weixin_33915554的博客
05-01 160
很多人知道canvas，但不一定都熟悉或者经常使用，作为一种专项工具，如果业务不是跟图像或者图表强相关，的确不常用，但对它的学习和了解还是必要的，这篇文章我们就一起来入个门。 Canvas是什么 可以理解为，它提供了一块画布，在它所掌控的区域，可以运用各种方法绘制图形、文本，或者制作动画、处理图像，等等。 通常我们能够看到一些炫酷的动画，很多都是canvas做出来的，但是需要各种元素和技巧综合使用...
canvas图片渐变倒影
05-24
实现图片渐变倒影可以通过以下步骤： 1. 在canvas中绘制原始图片。 2. 在canvas中创建一个渐变对象，用于创建倒影效果。 3. 将渐变对象应用到倒影区域的矩形中。 4. 使用clip()函数裁剪出倒影区域。 5. 将裁剪后的倒影区域翻转并绘制到canvas中，使其成为倒影效果。 以下是一个简单的实现示例代码： ```javascript // 获取canvas对象和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 加载图片 var img = new Image(); img.src = 'example.jpg'; img.onload = function() { // 绘制原始图片 ctx.drawImage(img, 0, 0); // 创建渐变对象 var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height / 2); // 添加渐变颜色 gradient.addColorStop(0, 'rgba(255, 255, 255, 0)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 1)'); // 应用渐变到倒影区域 ctx.fillStyle = gradient; ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2); // 裁剪出倒影区域 ctx.save(); ctx.beginPath(); ctx.rect(0, canvas.height / 2, canvas.width, canvas.height / 2); ctx.clip(); // 翻转倒影区域并绘制 ctx.translate(0, canvas.height); ctx.scale(1, -1); ctx.drawImage(img, 0, 0, canvas.width, canvas.height / 2); // 恢复之前的状态 ctx.restore(); }; ``` 在上述示例代码中，我们首先加载了一张示例图片，然后在canvas中绘制了原始图片。接着，我们创建了一个渐变对象并将其应用到倒影区域的矩形中。然后使用clip()函数裁剪出倒影区域，并对其进行翻转并绘制到canvas中，以实现倒影效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值