5、canvas 渐变填充色

渐变填充色，包含至少两种颜色。图形的一部分以一种颜色开始，然后渐渐地变成另一种颜色，在其变化过程中，会经历一种或多种预定义的颜色。

canvas 支持两种渐变填充：线性渐变或放射性渐变。

线性渐变填充：渐变色在一条直线上从一个点延伸到另一个点。使用 context.createLinearGradient( x1, y1, x2, y2 ) 方法将沿着点（x1, y1）与点（x2, y2）之间的直线填充渐变色。

放射性渐变填充：从你指定的空间的中心开始向各个方向扩散，从而创建出一个圆形。渐变从圆心开始到圆的边缘结束。

context.createRadialGradient( x1, y1, r1, x2, y2, r2 ) 方法以两个圆形作为参数，每个圆形由其圆心坐标和半径指定。

为了实现渐变填充，在渐变过程中，需要至少两种不同的颜色。在仅有两种颜色的情况下，填充的图形会从第一种颜色慢慢地变成第二种颜色。

如果加入更多的中间颜色，填充的图形就会自然地从第一种颜色变到第二种颜色，再到第三种颜色，以此类推，直到变成最终的颜色。

在设置颜色的同时，还需为每种颜色指定它们的位置，该值是介于 0 ~ 1 之间的小数，称为填充的比例。

比如，在两种颜色的填充中，分别指定0和1作为比例。

而在一个等距的三色渐变中则会使用 0、0.5 与 1 作为填充比例，0.5 表示第二种颜色恰好位于第一种颜色和最后一种颜色的中间位置。如果填充比例设置为 0、0.1 与 1的话，第一种颜色就会很快变为第二种颜色，再慢慢变成最后一种颜色。这里的数值不是表示像素值，而是与 1 的比率。

以颜色和比例值作为参数，可以使用 Gradient 对象的 Gradient.addColorStop( ratio, color ) 方法为渐变色添加颜色：

let gradient = context.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, "#ffffff");
gradient.addColorStop(1, "#ff0000");

以上代码在点（0,0）至点（100,100）之间创建一种线性渐变色，并定义两种颜色以及各自的比例，该渐变色将从白色渐变为红色。

然后将该渐变色赋值给 context.fillStyle 属性，并使用它绘制一个图形：

context.fillStyle = gradient;
context.fillRect(0, 0, 100, 100);

下面代码实现线性渐变和放射性渐变如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width"><title></title><style>*{margin: 0;padding: 0}</style>
</head>
<body><canvas id="myCanvas" width="600" height="400">Your browser does not support HTML5 Canvas.</canvas><script>(function(){window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){canvasApp();}function canvasSupport(e){return !!e.getContext;}function canvasApp(){var myCanvas = document.getElementById("myCanvas");if(!canvasSupport(myCanvas)){return ;}// startvar context = myCanvas.getContext("2d");drawScreen(myCanvas, context);}// write your codesfunction drawScreen(myCanvas, context){// 线性渐变填充let pt1 = {x: 10,y: 10};let pt2 = {x: 100,y: 100};let gradient = context.createLinearGradient(pt1.x, pt1.y, pt2.x, pt2.y);gradient.addColorStop(0, "#ffffff");gradient.addColorStop(0.3, "#0000ff");gradient.addColorStop(1, "#ff0000");context.fillStyle = gradient;context.fillRect(pt1.x, pt1.y, pt2.x, pt2.y);// 放射性渐变填充let c1 = {x: 200,y: 60,radius: 0};let c2 = {x: 200,y: 60,radius: 50};let gradient2 = context.createRadialGradient(c1.x, c1.y, c1.radius, c2.x, c2.y, c2.radius);gradient2.addColorStop(0, "#ffffff");gradient2.addColorStop(0.3, "#0000ff");gradient2.addColorStop(1, "#ff0000");context.fillStyle = gradient2;context.fillRect(c1.x - c2.radius, c2.y - c2.radius, c2.radius * 2, c2.radius * 2);}})();</script>
</body>
</html>

5、canvas 渐变填充色相关推荐

html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
canvas画圆、画带有圆角填充色的矩形
canvas画海报圆形微信头像,包括紫色背景带有圆角的矩形方法 1.画圆 2.画填充色的带有圆角的矩形
计算机图形学——多边形填色（多边形颜色渐变填充）
1.问题描述与算法思想问题描述多边形颜色渐变填充,设计实现多边形的填充类,设置顶点序列,调用填充函数.通过建立多边形的桶表和边表的数据,按照算法步骤依次扫描填充.调用设计实现的多边形填充类,对所绘 ...
html5 mask,HTML5 Canvas渐进填充与透明实现图像的Mask效果
HTML5 Canvas渐进填充与透明实现图像的Mask效果 2020-03-24 19:10:45 字体:大中小来源:转载供稿:网友详细解释HTML5 Canvas中渐进填充的参数设置与使 ...
HTML5 Canvas渐进填充与透明（摘自 http://blog.csdn.net/jia20003/article/details/9251893）
一:渐进填充(Gradient Fill) Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称为经向渐变填充(RadialGradient Fi ...
echarts折线图 - 区域图 -如何设置填充色
option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat ...
CAD如何输入指定角度的直线、AUTOCAD——渐变填充
有时候我们需要画一些具体角度数值的直线的时候,该怎么绘制呢?今天就用CAD梦想画图软件来操作一下. 操作工具操作系统:Windows10 CAD软件:CAD梦想画图步骤 1.首先输入直线(L)命令 ...
Android自定义-滑动缩放渐变填充曲线折线图表
文章目录自定义一.基础操作 1.新建类 2.坐标系 3.简单的折线图二.修饰折线图 1.折线图添加文字修饰. 三. 任意区域`可点击`的折线图 1.画布区域点击事件 1.区域点击带来的精彩四. ...
计算机word设置渐变填充,在word2013中设置渐变填充效果的详细设置步骤
软件安装:装机软件必备包装机软件必备包官方下载关于电脑装机必须的软件,比如windows office系列办公软件.网页浏览器.杀毒软件.安全防护软件.刻录软件.压缩软件. ...

5、canvas 渐变填充色

5、canvas 渐变填充色相关推荐

最新文章

热门文章