0
A
回答
0
是使用CSS梯度是可能的。我用这些颜色为背景创建了一个Fiddle。
canvas {
background: rgba(163,125,68,1);
background: -moz-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(163,125,68,1)), color-stop(50%, rgba(158,115,51,1)), color-stop(51%, rgba(158,17,17,1)), color-stop(100%, rgba(153,29,29,1)));
background: -webkit-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
background: -o-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
background: -ms-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
background: linear-gradient(to bottom, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a37d44', endColorstr='#991d1d', GradientType=0);
}
梯度css从cssmatic生成。
希望它有帮助。
0
你可以不能够使用多个背景画布,但我们动态创建的背景和应用颜色面料的js允许应用渐变的对象这样的..
var canvas = new fabric.Canvas("c");
var bgrect = new fabric.Rect({
left: 0,
top: 0,
width: canvas.getWidth(),
height: canvas.getHeight(),
selectable:false
});
bgrect.setGradient('fill', {
x1: 0,
y1: 0,
x2: 0,
y2: bgrect.height,
colorStops: {
0: "rgba(163,125,68,1)",
0.5:"rgba(163,125,68,1)",
0.51:"rgba(153,29,29,1)",
1: "rgba(153,29,29,1)"
}
});
canvas.add(bgrect)
bgrect.sendToBack();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c"></canvas>
+0
现在你让我想起它作为渐变应该被添加到fabricjs的背景功能。 – AndreaBogazzi
+0
是的,这也可能是一个很好的功能.. :-) –
相关问题
- 1. 只有css的多种背景颜色
- 2. Jquery滑块与多种背景颜色
- 3. QPalette具有多种颜色背景
- 4. 多种背景颜色相互重叠
- 5. 带有多种背景颜色的Cardview
- 6. 两种颜色背景
- 7. 背景颜色50%一种颜色和50%另一种颜色
- 8. 背景或背景颜色?
- 9. 背景颜色
- 10. 背景颜色
- 11. 背景颜色
- 12. 背景颜色
- 13. 颜色背景
- 14. 两种颜色的Android布局背景
- 15. 两种背景颜色(水平)
- 16. HTML背景的两种颜色
- 17. 两种颜色的带状背景?
- 18. CSS背景三角3种颜色
- 19. Bootstrap3网格 - 2种背景颜色
- 20. 将背景转换为一种颜色
- 21. CSS3PIE背景褪色背景颜色
- 22. 更改背景颜色多色
- 23. 在UIView中将背景色从一种颜色淡出到另一种颜色
- 24. 将div的背景颜色的80%设置为一种颜色
- 25. Uipicker背景颜色
- 26. NSImageView +背景颜色
- 27. DBVisualizer背景颜色
- 28. 背景颜色,ForegroundColor
- 29. QSciScintilla背景颜色
- 30. 1背景颜色
它坏解决方案因为我需要使用颜色选择器更改背景颜色 –
它不是一个不好的解决方案。这是一个糟糕的问题。你应该在问题中提到,无论哪种方式,都可以通过colorPicker中的javascript更改CSS。但对于不同的颜色背景,这个渐变的CSS是最好的解决方案。 –
使用样式设置背景颜色将不允许您将内容导出到其他图像到svg,既不使用json序列化它。 – AndreaBogazzi