canvas绘制一个渐变颜色的矩形

最新推荐文章于 2024-05-09 10:29:51 发布
最新推荐文章于 2024-05-09 10:29:51 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： 前端知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44797965/article/details/104330530
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
/*        .linearGradient{
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right,pink,blue);
        }*/
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
    /*也可以使用一个渐变的方案了填充矩形*/
    /*创建一个渐变的方案*/
    /*渐变是由长度的*/
    /*x0y0 起始点 x1y1 结束点  确定长度和方向*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    //linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');
    ctx.fillStyle = linearGradient;
    ctx.fillRect(100,100,400,100);
    /*pink---->blue*/
    /*回想线性渐变---->要素 方向  起始颜色 结束颜色 */
    /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>
</html>

运行结果如下:

码农阳神
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript canvas绘制渐变颜色的矩形
10-15
在JavaScript中，HTML5的Canvas API提供了一种强大的方式来绘制图形，包括矩形、圆形、线条等。在这个场景中，我们将重点讨论如何利用Canvas API绘制一个...希望这个解释有助于你理解和应用Canvas绘制渐变颜色的矩形。
手把手教你实现一个流动的渐变色边框
qq_44025543的博客
11-28 379
html
canvas画布，绘制矩形、圆形、渐变色、图片、文字
qq_51066068的博客
04-25 2369
画布 canvas元素是H5新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。canvas只是一个容器，不具备绘制能力，需要我们编写js代码实现 矩形 绘制矩形的步骤： 1. 取得canvas对象 2. 取得2d上下文（context） 3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式 4. 指定线宽，使用图形上下文对象中..
Android 图形：绘制渐变色奥运五环图形，游戏文字，验证码，Matrix旋转，缩放(2)
最新发布
2401_84545908的博客
05-09 253
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。
canvas绘制渐变的矩形
qq_43537987的博客
05-26 767
效果展示： 代码部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变矩形</title> <style> canvas { border: 1px dashed red; } </st...
原生canvas标签画线——直线、平行线（设置不同颜色和宽度）
weixin_45096939的博客
05-24 1750
【代码】原生canvas标签画一条直线。
canvas在图片上标记后保存到后台
u010645489的博客
05-13 577
canvas在图片上标记后保存到后台
uniapp H5遮罩层，弹窗，蒙层滚动穿透/滑动穿透
weixin_45368519的博客
03-24 3220
近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下
js+canvas绘制矩形的方法
10-22
在这个例子中，我们创建了一个宽高为400像素的`<canvas>`元素，其ID为`myCanvas`，并且设置了一个默认的背景颜色。 接下来，我们需要在`<script>`标签内编写JavaScript代码，以便于获取Canvas的2D渲染上下文并执行...
html5 canvas绘制放射性渐变色效果
09-28
`addColor` 方法接受一个颜色数组，数组中的每个元素包含颜色和位置（0到1之间），然后调用 `addColorStop` 添加这些颜色到渐变中。最后，`draw` 方法设置填充样式为创建的渐变，并填充指定的矩形区域。 以下是一段...
canvas画矩形（包括渐变）
08-12
这篇博客"canvas画矩形（包括渐变）"探讨了如何使用Canvas API来绘制矩形，并且介绍了如何创建和应用线性渐变效果。在本文中，我们将深入探讨这些概念，以帮助你更好地理解和运用它们。 首先，Canvas API提供了两个...
canvas笔记-使用canvas画矩形及各样式（透明）
IT1995的博客
05-31 4580
程序运行截图如下： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px a
【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案
热门推荐
Will 的专栏
04-02 1万+
矩形、颜色、透明度、渐变及图案（感觉没怎么懂！！先放这吧，回产头再研究） 矩形 CanvasRenderingContext2D对象定义了4个用于绘制矩形的方法 都接受两个参数，其中一个指定矩形的一个顶点，另一个参数指定矩形的宽高 n  fillRect() 使用fillStyle来填充指定矩形。 n  strokeRect() strokeStyle和其它线段的属性来勾勒指定的矩形
canvas学习(一)--绘制渐变矩形
u013404537的博客
01-29 408
1.绘制矩形 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;渐变矩形&lt;/title&gt; &lt;style&gt; canvas{
使用Canvas绘制矩形
c_nwe_one的博客
03-27 1211
使用Canvas绘制矩形
26 canvas绘制矩形
丨Anna丨的博客
10-28 5632
26 canvas绘制矩形 1绘制矩形方法 语法 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色） strokeRect(x, y, width, height) ---->清除指定矩形区域，让清除部分完全透明。 clearRect(x, y, width, height) x与y.
android canvas画渐变背景,View绘制系列(13)-Canvas渐变属性绘制
weixin_28782823的博客
05-26 2841
Canvas渐变属性绘制五颜六色，七彩缤纷。有时候我们的UI设计稿也极尽色彩之能，比如下图这样： 这种渐变效果我们能画吗？不得不说，Android系统的基础构架还是很强大的，我们可以使用LinearGradient进行绘制，与其相关的还有SweepGradient，RadialGradient.LinearGradient,SweepGradient及RadialGradient均为Shader子...
html5 渐变色矩形,如何用HTML5中的canvas绘制渐变矩形
weixin_32626635的博客
06-07 629
canvas是HTML5中新增的特性，它可以在浏览器上绘制出各种酷炫的效果，作为一个前端开发人员，你知道如何用canvas绘制图形吗？这篇文章就和大家讲讲如何用canvas绘制一个矩形及一个渐变色矩形，有一定的参考价值，感兴趣的朋友可以参考一下。 标签可以用来绘制图形，但是要通过JavaScript脚本来实现效果，因为标签只是一个装图形的容器，效果的实现要借助JavaScript脚本。我们可以用c...
前端——用Canvas绘制矩形
Searchin_R的博客
09-19 2258
CanvasRenderingContext2D提供了两个方法绘制几何图形; fillRect(double x,double y,double width,doubke height) 填充一个矩形区域 strokeRect(double x,double y,double width,double height) 绘制一个矩形边框 也就是说，CanvasRenderingC...
使用canvas标签完成折线、矩形、颜色渐变矩形及圆形的绘制
06-01
好的，我来回答你的问题。 首先，我们需要在 HTML 中添加一个 canvas 标签： ```html <canvas id="myCanvas" width="400" height="400"></canvas> ``` 接下来，我们可以使用 JavaScript 来绘制折线、矩形、颜色渐变矩形及圆形，具体代码如下： ```javascript // 获取 canvas 元素 const canvas = document.getElementById("myCanvas"); const context = canvas.getContext("2d"); // 绘制折线 context.beginPath(); context.moveTo(50, 50); context.lineTo(100, 100); context.lineTo(150, 50); context.strokeStyle = "red"; context.stroke(); // 绘制矩形 context.fillStyle = "blue"; context.fillRect(200, 50, 50, 50); // 绘制颜色渐变矩形 const gradient = context.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop(0, "red"); gradient.addColorStop(0.5, "green"); gradient.addColorStop(1, "blue"); context.fillStyle = gradient; context.fillRect(50, 150, 200, 50); // 绘制圆形 context.beginPath(); context.arc(300, 200, 50, 0, 2 * Math.PI); context.fillStyle = "yellow"; context.fill(); ``` 以上代码中，我们使用了 `beginPath()` 方法来开始绘制路径，使用 `moveTo()` 和 `lineTo()` 方法来绘制折线，使用 `strokeStyle` 属性设置线条颜色，使用 `stroke()` 方法来绘制线条。 我们还使用了 `fillStyle` 属性来设置填充颜色，使用 `fillRect()` 方法来绘制矩形，使用 `createLinearGradient()` 方法来创建颜色渐变，使用 `addColorStop()` 方法来设置渐变颜色点，并最终使用 `fill()` 方法来填充颜色渐变矩形。 最后，我们使用 `arc()` 方法来绘制圆形，使用 `fill()` 方法来填充圆形。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值