如何将渐变的底部锚定到HTML5 Canvas中填充的容器?

用户名

我正在尝试在画布的中途绘制渐变,以使渐变覆盖上半部分。

问题是我无法弄清楚如何使渐变与“容器”(由所控制的形状fillRect())对齐-当我将容器推到合适的位置时,渐变会停留在画布的底部; 而不是填充容器的底部。

渐变的底部应从其填充的容器的底部开始,而不是画布的底部。我该如何实现?

//not sliding gradient container upward
function paintC1() {
  var canvas = document.getElementById('canvas-1');
  var context = canvas.getContext('2d');
  var height = canvas.height;
  var width = canvas.width;
  var grd = context.createLinearGradient(width, 0, width, height);
  grd.addColorStop(0.5, 'rgba(0,174,239,0)');
  grd.addColorStop(0.85, 'rgba(0,174,239,0.6)');
  grd.addColorStop(1, 'rgba(0,174,239,1)');
  context.fillStyle = grd;
  context.fillRect(0, 0, width, height);
}

/* for comparison */

//sliding gradient container up
function paintC2() {
  var canvas = document.getElementById('canvas-2');
  var context = canvas.getContext('2d');
  var height = canvas.height;
  var width = canvas.width;
  var grd = context.createLinearGradient(width, 0, width, height);
  grd.addColorStop(0.5, 'rgba(0,174,239,0)');
  grd.addColorStop(0.85, 'rgba(0,174,239,0.6)');
  grd.addColorStop(1, 'rgba(0,174,239,1)');
  context.fillStyle = grd;
  context.fillRect(0, -50, width, height);
}

paintC1();
paintC2();
<canvas id="canvas-1" style="width:250px; height:500; border-style:solid; float:left; margin-right:10px;"></canvas>

<canvas id="canvas-2" style="width:250px; height:500; border-style:solid; float:left; margin-right:10px;"></canvas>

亚历山德罗

渐变填充是相对于画布而不是元素而言的,因此要完成任务,您应该执行以下操作。

 var grd = context.createLinearGradient(width, -50, width, height -50);

否则,您必须翻译上下文:

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 0, 30);
var sampleW = 100;
var sampleH = 30;
gradient.addColorStop(0.5, 'rgba(0,174,239,0)');
gradient.addColorStop(0.85, 'rgba(0,174,239,0.6)');
gradient.addColorStop(1, 'rgba(0,174,239,1)');

var translations= [[30, 150],[100, 110],[170, 70],[240, 30]];

context.font = '12px verdana bold';
for (var i = 0; i < translations.length; i++) {
  var t= translations[i];
  context.save();
  // gradient is defined at the origin,
  // so we have to move the origin
  context.translate(t[0], t[1])
  context.fillStyle = gradient;
  context.fillRect(0, 0, sampleW, sampleH);
  context.strokeRect(0, 0, sampleW, sampleH);
 
  context.restore();
}
<canvas id="c" width="500" height="500"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

HTML5如何将src中的图像发布到服务器

来自分类Dev

如何使控件填充WPF中的容器?

来自分类Dev

如何填充<a>标记以填充容器中的父div

来自分类Dev

如何将元素锁定到容器(正方形)中的 div 的底部?

来自分类Dev

扑出底部填充容器

来自分类Dev

如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

来自分类Dev

如何将HTML5 canvas上下文重置为默认值?

来自分类Dev

如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

来自分类Dev

KineticJS:如何将舞台转换为HTML5 Canvas元素?

来自分类Dev

如何将容器中的弹性物品移到底部?

来自分类Dev

将完整图像填充到svg容器中

来自分类Dev

将完整图像填充到svg容器中

来自分类Dev

如何在Susy 2.0中向容器添加左右填充

来自分类Dev

从Bootstrap 5中删除容器流体中的默认左填充和右填充

来自分类Dev

如何在构建另一个容器的过程中填充Mysql docker容器?

来自分类Dev

Docker为节点mongo提供了单独的容器,如何从节点容器中填充mongo

来自分类Dev

如何将文件加载到html5音频标签中

来自分类Dev

如何将事件添加到使用html5绘制的矩阵中?

来自分类Dev

如何将HTML5,经度和纬度保存到数据库中?

来自分类Dev

如何将文件路径动态加载到 html5 源标记中?

来自分类Dev

如何将倾斜的容器底部弄平?

来自分类Dev

HTML Canvas中的渐变

来自分类Dev

如何在Bootstrap 3中创建一个无需填充即可填充整个屏幕的容器?

来自分类Dev

HTML5 Canvas 围绕中心旋转渐变

来自分类Dev

使用jCanvas和jQuery在HTML5 Canvas中水平动画化渐变

来自分类Dev

渐变贴图是HTML5 canvas元素中的不透明度吗?

来自分类Dev

如何在HTML5画布中显示更平滑的渐变?

来自分类Dev

缩放背景图案填充html5 canvas标签

来自分类Dev

缩放背景图案填充html5 canvas标签

Related 相关文章

  1. 1

    HTML5如何将src中的图像发布到服务器

  2. 2

    如何使控件填充WPF中的容器?

  3. 3

    如何填充<a>标记以填充容器中的父div

  4. 4

    如何将元素锁定到容器(正方形)中的 div 的底部?

  5. 5

    扑出底部填充容器

  6. 6

    如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

  7. 7

    如何将HTML5 canvas上下文重置为默认值?

  8. 8

    如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

  9. 9

    KineticJS:如何将舞台转换为HTML5 Canvas元素?

  10. 10

    如何将容器中的弹性物品移到底部?

  11. 11

    将完整图像填充到svg容器中

  12. 12

    将完整图像填充到svg容器中

  13. 13

    如何在Susy 2.0中向容器添加左右填充

  14. 14

    从Bootstrap 5中删除容器流体中的默认左填充和右填充

  15. 15

    如何在构建另一个容器的过程中填充Mysql docker容器?

  16. 16

    Docker为节点mongo提供了单独的容器,如何从节点容器中填充mongo

  17. 17

    如何将文件加载到html5音频标签中

  18. 18

    如何将事件添加到使用html5绘制的矩阵中?

  19. 19

    如何将HTML5,经度和纬度保存到数据库中?

  20. 20

    如何将文件路径动态加载到 html5 源标记中?

  21. 21

    如何将倾斜的容器底部弄平?

  22. 22

    HTML Canvas中的渐变

  23. 23

    如何在Bootstrap 3中创建一个无需填充即可填充整个屏幕的容器?

  24. 24

    HTML5 Canvas 围绕中心旋转渐变

  25. 25

    使用jCanvas和jQuery在HTML5 Canvas中水平动画化渐变

  26. 26

    渐变贴图是HTML5 canvas元素中的不透明度吗?

  27. 27

    如何在HTML5画布中显示更平滑的渐变?

  28. 28

    缩放背景图案填充html5 canvas标签

  29. 29

    缩放背景图案填充html5 canvas标签

热门标签

归档