HTML canvas createLinearGradient() 方法

最新推荐文章于 2023-04-06 16:24:55 发布
最新推荐文章于 2023-04-06 16:24:55 发布
阅读量702 收藏
点赞数
分类专栏： html5 文章标签： html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Night_Emperor/article/details/73521934
版权

本文参考菜鸟教程网做的整理笔记

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML5 之颜色渐变(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<br/>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>

var c=document.getElementById("myCanvas");
/*getContext() 方法可返回一个对象，
该对象提供了用于在画布上绘图的方法和属性*/
var ctx=c.getContext("2d");

// Create gradient
/*渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色
横坐标180处是黄色，由红色向黄色过渡。*/
var grd=ctx.createLinearGradient(0,0,180,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"yellow");

// Fill with gradient
ctx.fillStyle=grd;//定义填充方式：渐变
ctx.fillRect(10,10,100,100);//设置填充范围
var c1=document.getElementById("myCanvas1");
var ctx1=c1.getContext("2d");


// Create gradient
/*渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色
横坐标180处是黄色，由红色向黄色过渡。*/
var grd1=ctx1.createLinearGradient(0,0,180,0);
grd1.addColorStop(0,"red");
grd1.addColorStop(1,"yellow");

// Fill with gradient
ctx1.fillStyle=grd1;//定义填充方式：渐变
ctx1.fillRect(10,10,180,100);//设置填充范围


</script>

</body>
</html>

这里写图片描述

createLinearGradient(0,0,180,0);渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色横坐标180处是黄色，由红色向黄色过渡。
但是，第一个fillRect(10,10,100,100)设置填充范围100X100，
第二个fillRect(10,10,180,100)设置填充范围180X100，比较两者的区别，其实是就像第一个从第二个处的横坐标0-100处截取的。

Night_Emperor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas创建线性渐变
hb707934728的博客
04-06 729
--> Rectangles 线性渐变 #canvas { background: #eeeeee; border: thin solid cornflowerblue; } Canvas no
canvas学习之渐变---createLinearGradient
昨天丶今天丶明天的的博客
08-14 9780
在canvas画出的矩形, 圆形, 线条, 文本等的各种形状中，可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果，实现效果如下图所示 createLinearGradient(x,y,x1,y1) - 创建线条渐变 addColorStop(index,color)方法指定颜色停止，参数使用index来描述，index范围在0-1之间，0.5即给定横纵坐标的50%，color...
HTML5简明教程-1.1.4.HTML5Canvas参考手册 之 线性渐变 createLinearGradient
lufaxinT
01-06 2759
HTML5的canvas为我们提供了类似于CSS3中linear-gradient属性定义的渐变效果，用createLinearGradient()方法可以创建基于画布的线性渐变，创建好的线性渐变可以用于填充路径、定义笔触等。同时，HTML5也为我们提供了createRadialGradient()方法用于创建放射渐变，我们将在另一篇博文中详细介绍。
canvas图形着色-线性渐变-createLinearGradient
caoxinjian423的博客
11-05 748
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas图形着色-线性渐变</title> </head> <body> <c.
CSS学习之路: 如何理解canvas中的渐变createLinearGradient()?
最新发布
Code_King006的博客
04-06 795
创建渐变轴，createLinearGradient(x,y,x1,y1),x,y指定渐变起点，本例中x=0,y=0以坐标轴(0,0)点开始作为渐变起点，x1,y1指定渐变终点(200,0)，createLinearGradient，定义线性渐变，以起点到终点连线，作为渐变轴，本里是以(0,0)–>(200,0)即横向渐变。在canvas画出的矩形, 圆形, 线条, 文本等的各种形状中，可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果，实现效果如下图所示。
html5的canvas方法使用指南
09-28
HTML5的Canvas是Web开发中用于动态图形绘制的重要组成部分，它允许开发者通过JavaScript直接在网页上进行图形操作。这篇指南将深入介绍Canvas的一些关键方法，帮助你更好地理解和运用这个强大的工具。 首先，Canvas...
html5 canvas核心技术
07-04
- `getContext('2d')`: 这是获取2D渲染上下文的方法，它是所有Canvas绘图操作的基础。 - `fillRect(x, y, width, height)`: 绘制填充的矩形。 - `strokeRect(x, y, width, height)`: 只描边矩形，不填充。 - `...
HTML5 Canvas激光线条特效特效代码
03-20
在Canvas上绘制线条的基本方法是`context.beginPath()`开始路径，然后用`context.moveTo(x1, y1)`设置起点，`context.lineTo(x2, y2)`设置终点，最后用`context.stroke()`描边。在这个特效中，粉色激光可能是通过...
HTML5 canvas基本绘图之填充样式实现
09-27
要进行绘图，我们首先需要获取`<canvas>`元素对应的DOM对象，然后调用`getContext()`方法，传入参数"2d"，这样就能得到一个CanvasRenderingContext2D对象。这个对象提供了众多方法，如`fillRect()`、`strokeRect()`...
HTML5 Canvas太空虫洞特效
07-24
Canvas提供`createLinearGradient`或`createRadialGradient`方法来创建渐变对象，然后将其设置为`fillStyle`或`strokeStyle`。 5. **性能优化**：由于大量的线条绘制可能会导致性能下降，所以开发者需要考虑优化...
Canvas 使用createLinearGradient绘制颜色渐变的矩形
DevOps海洋的渔夫@专栏
01-17 1234
需求 之前我使用遍历的方式绘制了一个线的颜色渐变，这种方式其实不好，本章节来看看使用createLinearGradient方法来设置颜色渐变。 首先使用fillRect（x，y，w，h）绘画一个矩形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
HTML5绘制渐变直线,如何使用HTML5 Canvas绘制动态线性渐变
weixin_42495057的博客
05-31 458
如果要使用HTML5 Canvas绘制线性渐变，需要用到createLinearGradient()方法。下面我们就来一起看看具体的内容。createLinearGradient()createLinearGradient()的参数如下。createLinearGradient(渐变开始位置的X坐标，渐变开始位置的Y坐标，渐变结束位置的X坐标，渐变结束位置的Y坐标)我们来看具体示例代码如下body...
addColorStop()和createLinearGradient()方法
dreamjay1997的博客
10-19 2201
createLinearGradient：这个是canvas的context的一个方法，参数按顺序是x0, y0, x1, y1，按我的理解其实就是定义了一根线， 颜色沿着这条线的指向进行渐变 addColorStop：这个方法有两个参数，按顺序是梯度，color，梯度的取值要在0-1之间，不然会报错，这个方法决定了完成颜色渐变所需的长度，从0到1，意味这渐变知道长度结束才完成，这里的长度指的...
createLinearGradient使用小结
01-15 1594
演示窗体宽640，高480 这里强调宽高的目的是因为在另外一篇介绍圆形进度条的文章中使用线性渐变发现，如果传入createLinearGradient的参数要严重大于其所在窗体的宽高的时候渐变效果很不明显，几乎没有，达不到我那篇文章中的渐变效果，我开始还以为用错了。 https://mp.csdn.net/postedit/86488520   渐变效果： createLinearGra...
html5 linear,HTML5 Canvas ( 线性渐变, 升级版的星空 ) createLinearGradient, addColorStop
weixin_30562977的博客
06-26 204
canvas*{margin:0;padding:0;outline:none;border:none;}#canvas{width:7rem;margin:.25rem 0 0 1.5rem;border:1px solid black;}/*** rem 布局初始化*/$(‘html‘).css(‘font-size‘, $(window).width()/10);/*** 获取 canvas...
HTML canvas addColorStop() 、createLinearGradient() 、createRadialGradient() 方法
ssisse的博客
08-19 6558
HTML canvas createLinearGradient() 方法 定义和用法 createLinearGradient() 方法创建线性的渐变对象。 渐变可用于填充矩形、圆形、线条、文本等等。 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gra
Canvas学习Part1 - fillStyle、createLinearGradient() 、createPattern() 、createRadialGradient()
Super Livia
09-28 394
fillStyle 属性 用法：设置或返回用于填充绘画的颜色、渐变或模式。 基本用法 <canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext(.
html5创建圆形渐变,HTML5 canvas createRadialGradient()放射状/圆形渐变
weixin_29069131的博客
06-16 1277
定义和用法createLinearGradient() 方法创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。提示：请使用addColorStop()方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。原理示意图JavaScript 语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);参数值参数描述x0渐变的开...
html圆渐变颜色代码,HTML5 canvas createRadialGradient()放射状/圆形渐变(示例代码)
weixin_31141099的博客
06-10 634
定义和用法createLinearGradient() 方法创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。提示：请使用addColorStop()方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。原理示意图JavaScript 语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);参数值参数描述x0渐变的开...
HTML5 Canvas基础绘图教程
2. **图形绘制**：Canvas提供了绘制矩形（`rect()`）、圆形（`arc()`）和弧线（`arcTo()`）的方法，以及自定义路径的绘制。 3. **渐变和模式**：`createLinearGradient()`和`createRadialGradient()`用于创建线性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值