`

CanvasGradient----画布渐变对象用法详解

阅读更多

想要实现诸如颜色渐变的复杂样式,就需要使用到本文将要介绍的CanvasGradient对象。

 

在html5中,CanvasGradient对象表示一个颜色渐变。在前面的文章中我们已经知道,将画笔(CanvasRenderingContext2D对象)的fillStylestrokeStyle属性设置为指定的颜色样式(例如"#f00"),就可以让当前图形渲染上指定的颜色。同样的,如果我们将上述属性的值设为一个CanvasGradient对象,那么就可以让对应的图形具有颜色渐变效果。

常见的颜色渐变效果常见的颜色渐变效果

 

在html5中,我们使用CanvasGradient对象就可以较为简单地实现类似上述图片中的颜色渐变效果。目前CanvasGradient对象可以实现两种不同形式的颜色渐变:线性颜色渐变(从一端到另一端的颜色渐变)和放射性颜色渐变(从一个点或一个圆向外进行辐射性的颜色渐变)。

既然要使用到CanvasGradient对象,那么我们应该如何创建一个CanvasGradient对象呢?

在html5中,我们可以使用CanvasRenderingContext2D对象的下列方法来创建一个CanvasGradient对象。

    ①线性渐变

createLinearGradient(int startX, int startY, int endX, int endY)
创建一个作用于canvas指定区域的线性颜色渐变CanvasGradient对象。作用区域是一个以左上角坐标为(startX,startY)、右下角坐标为(endX,endY)的矩形区域
②环形放射
createRadialGradient(int startX, int startY, int startRadius, int endX, int endY, int endRadius)
创建一个作用于canvas指定区域的放射性颜色渐变CanvasGradient对象。作用区域是一个以(startX,startY)为圆心、startRadius为半径的内圆到以(endX,endY)为圆心、startRadius为半径的外圆之间的环状区域

    获取到CanvasGradient对象之后,我们就要使用它来实现颜色渐变效果了。现在,我们先来看看CanvasGradient对象的所具备的属性和方法:

属性或方法 基本描述
addColorStop(float offset, string color) 在当前渐变点和指定的渐变点(offset)之间实现当前颜色到指定颜色的渐变效果。

是的,你没有看错:CanvasGradient对象只有一个名为addColorStop()的方法,参数offset是一个范围在0.0到1.0之间的浮点值。对于CanvasGradient对象而言,它将整个作用区域看成是一个从0到1的过度,0表示起始点,1表示结束点。我们可以一次或者多次调用addColorStop()方法向作用区域中添加指定颜色的渐变点。在绘制成图像时,它就会实现从上一个渐变点的颜色到下一个渐变点的颜色进行过渡的渐变效果。

使用CanvasGradient实现线性颜色渐变

对于初学者而言,可能上述文字不易理解,现在我们结合实际的例子来帮助理解。我们编写代码来为一个长度为200px、宽度为20px的直线线段添加线性渐变效果,实例代码如下:

 

 

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>HTML5 CanvasGradient实现线性颜色渐变效果的入门示例</title>
</head>
<body>
<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvasid="myCanvas"width="400px"height="300px"style="border:1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
   
    ctx.beginPath();
    //线段的起点坐标为(50,50)
    ctx.moveTo(50,50);
    //线段的终点坐标为(250,50)
    ctx.lineTo(250,50);
    //设置线条宽度为20px
    ctx.lineWidth =20;
   
    //创建一个表示线性颜色渐变的CanvasGradient对象,并设置该对象的作用区域就是线段所在的区域
    var canvasGradient = ctx.createLinearGradient(50,50,250,50);
    //在offset为0的位置(即起点位置)添加一个蓝色的渐变
    canvasGradient.addColorStop(0,"blue");
    //在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变
    canvasGradient.addColorStop(0.2,"green");
    //在offset为0的位置(即终点位置)添加一个红色的渐变
    canvasGradient.addColorStop(1,"red");
    //将strokeStyle的属性值设为该CanvasGradient对象
    ctx.strokeStyle = canvasGradient;
   
    //最后,绘制出当前绘制路径的图形效果
    ctx.stroke();  
}
</script>
</body>
</html>
 

 

上述代码的运行效果显示如下:

实现从蓝色到绿色、再到红色的线性渐变效果实现从蓝色到绿色、再到红色的线性渐变效果

备注:如果最后一个颜色渐变点的offset不为1(即不是结束点),则该渐变点到结束点之间都将是该渐变点指定的颜色。例如,在上面的例子中,将添加第3个渐变点的addColorStop(1, "red")改为addColorStop(0.5, "red"),则线段从中间位置(offset=0.5)到结束点之间都为红色。

 

如上述代码所示,我们只需要一次或多次调用CanvasGradient对象的addColorStop()方法即可为指定区域的图形添加对应的线性颜色渐变效果。

使用CanvasGradient实现放射性颜色渐变

接着,我们继续尝试给指定的图形添加放射性颜色渐变效果。在前面的文章《使用html5 canvas绘制圆形》中,我们学习了使用Canvas绘制圆形的方法。现在,我们就绘制出一个实心圆,并为其添加放射性颜色渐变效果。

首先,我们先来绘制一个半径为50px的实心圆。

 

<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
   
    //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形
    ctx.arc(100,100,50,0,Math.PI *2,false);
    //如果调用stroke()将得到一个空心圆,调用fill()将得到一个内部填充的实心圆
    ctx.fill();
}
</script>

 

对应的显示效果如下:

使用canvas绘制的实心圆效果使用canvas绘制的实心圆效果

 

由于在绘制实心圆时,我们没有指定填充的颜色,所以默认是用黑色来进行填充的。现在,我们就使用CanvasGradient对象为其添加放射性的颜色渐变效果。

 

<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
   
    //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形
    ctx.arc(100,100,50,0,Math.PI *2,false);
   
    //创建一个表示放射性颜色渐变的CanvasGradient对象
    //该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域
    var canvasGradient = ctx.createRadialGradient(100,100,10,100,100,50);
    //在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变
    canvasGradient.addColorStop(0,"blue");
    //在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变
    canvasGradient.addColorStop(0.5,"green");
    //在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变
    canvasGradient.addColorStop(1,"red");
    //将fillStyle的属性值设为该CanvasGradient对象
    ctx.fillStyle = canvasGradient;
   
    ctx.fill();
}
</script>

 

对应的显示效果如下:

实现从蓝色到绿色、再到红色的放射性渐变效果实现从蓝色到绿色、再到红色的放射性渐变效果

备注:放射性颜色渐变效果一般用于圆形、扇形等从某处开始向周围发散的图形,不过,放射性颜色渐变效果同样可以用于其他图形。它并不依赖于图形,而是依赖于创建CanvasGradient对象时所指定的作用区域。不管是何种图形,它都会在指定的作用区域内实现对应的颜色渐变效果。

 

值得注意的是,对于在绘制的图形之内、却又在颜色渐变作用范围之外的区域,如果没有额外的样式设置,那么它们都会被渲染为与它最近的渐变点所指定的颜色。

分享到:
评论

相关推荐

    xiaoka2017-easy-flow-master_画布拖拽碰撞检测_easy_

    4. **实现原理**:在JavaScript或类似的前端语言中,可能会使用`mousedown`、`mousemove`和`mouseup`事件来处理拖拽操作,同时结合`getBoundingClientRect()`方法获取元素的相对屏幕位置。对于碰撞检测,可以先计算...

    DELPHI 学习--------水平渐变色

    4. **TCanvas 类**:Delphi 中的 TCanvas 类提供了一系列绘图方法,如 `MoveTo`, `LineTo`, `FillRect`, `Draw`, 等,可以用来绘制渐变色的矩形或其他形状。 5. **GDI+ 库**:Delphi 也可以利用 GDI+ 图形库,它...

    react-komik, 基于 fabric.js 画布绘制的基于ReactJS的漫画.zip

    react-komik, 基于 fabric.js 画布绘制的...基于ReactJS的漫画条创建器使用 fabric.js 画布渲染。 这就像的眼镜但是对于漫画。 你可以在渲染后编辑( 定位,缩放,着色) 。 Reactify任何东西,Reactify漫画。 用法模块

    photoshop教程

    ---图象---旋转画布90顺----滤镜---风格化---风---从右----CTRL+F-----滤镜---锐化---锐化边缘---图象---旋转画布90逆----滤镜---扭曲--极坐标[平面坐标到极坐标]----图层--新建填充图层--设置渐变

    微信小程序----导航栏透明渐变一

    这可以通过在`Page`对象的`onScroll`生命周期函数中实现: ```javascript Page({ data: { scrollTop: 0, // 存储滚动位置 }, onScroll: function(e) { const scrollTop = e.detail.scrollTop; // 获取当前...

    超能画布-AI绘画变现指南.zip

    “超能画布”是一款专注人像摄影品类的创意生成平台工具,支持单张图片AI生成创作功能 提供变现资源: 超能画布----如何微调完善画面 超能画布----超细节的基本出图流程!! 超能画布----今天给大家带来的是小红...

    FusionCharts_参数大全

    ### FusionCharts参数详解 在构建数据可视化项目时,FusionCharts作为一个强大且灵活的图表库,提供了丰富的参数选项,使得用户能够根据需求定制各种样式的图表。本文将深入解析FusionCharts中的关键参数,帮助...

    posh-processing-canvas:处理JS画布

    **JavaScript画布处理详解** 在Web开发中,HTML5的Canvas元素提供了一种强大的方式来在浏览器中绘制图形,实现动态图像和交互式可视化。"posh-processing-canvas"项目正是针对JavaScript画布处理的一个豪华解决方案...

    infinite-canvas:无限的html5画布

    这通过创建无限增长的缓冲画布来工作,当使用.move([x, y])相对移动原点或绝对使用.setOrigin([x, y])相对移动原点时,可以调整画布的大小和位置。 本质上,包裹的画布成为一个窗口,您可以在缓冲画布周围移动。 当...

    vue 画布 vue-fabric-drawing

    3. **属性和方法**:Vue Fabric Drawing 提供了一系列属性和方法,用于控制画布的行为。例如,可以设置画布的大小、背景颜色,以及是否开启对象选择等。此外,还可以调用方法进行绘制、擦除、保存或加载图形等操作。...

    4-7-2(Canvas画布).7z

    在本文中,我们将深入探讨HTML5中的Canvas画布技术,它是现代Web开发中一个非常重要的图形绘制工具。Canvas是一个基于矢量图形的元素,...在"4-7-2(Canvas画布)"的学习资源中,你将有机会深入了解这些技术和实践方法。

    images-quickly-compress:利用canvas画布压缩图片

    利用canvas画布压缩图片(ES6语法) 安装: npm install images-quickly-compress --save 使用方式: import ImagesQuicklyCompress from "images-quickly-compress";//导出:压缩图片插件 //压缩方式一: let ...

    ctx-translate-center:转换为 html5 画布 2d 上下文的中心

    ctx-翻译中心转换为 html5 画布 2d 上下文的中心安装npm install ctx-translate-center 用 var center = require('ctx-translate-center');var ctx = document.createElement('canvas').getContext('2d');document....

    HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc

    : CanvasRenderingContext2D) 创建一个 Canvas 对象,该对象的参数 context 类型是 CanvasRenderingContext2D,表示画布的绘制上下文。该参数不是必填的,默认值为空。 Canvas 组件支持通用属性和事件,同时也支持...

    canvas-5-polyfill:HTML 5画布Polyfill

    Canvas 5 Polyfill使用了安装过程: bower install --save canvas-5-polyfill 您也可以直接在获取代码。 用法 &lt;html&gt; &lt;head&gt; &lt;title&gt;Test Canvas Polyfill&lt;/title&gt; [removed][removed]...

    svg-to-image, 在画布中,将SVG文本转换为可以绘制的图像.zip

    svg-to-image, 在画布中,将SVG文本转换为可以绘制的图像 svg-to-image 使用 Blob 和 URL.createObjectURL 将SVG字符串转换为 HTMLImageElement 。 返回到不支持的浏览器( 如 Safari 8.0 )的encodeURICompone

    应用开发-画布技术-时钟-功能性小程序-画布时钟小程序.zip

    这个时钟小程序不仅提供时间显示,还能作为学习如何在小程序中使用画布技术的示例。 主要特点: 实时时钟显示:提供模拟和数字时钟的实时时间显示。 自定义设计:允许用户自定义时钟的外观,包括颜色、字体和布局。...

    webgl2-2d:WebGL2 中的画布 API 实现

    webgl2-2d WebGL2 中的画布 API 实现用法 // const ctx = canvas.getContext('2d') // origin canvas 2D contextconst ctx = canvas . getContext ( 'webgl2-2d' ) // WebGL2 implementation清单参考: : ...

    React-to-Canvas-to-Video:将React转换为画布,然后将其自动下载为.webm视频

    对画布到视频做出React将React变成canvas元素,并允许将交互下载到webm视频中入门克隆并安装,将在10秒后自动下载生成的视频,触发在App.jsx内进行下载,可以更改为按钮事件等正在安装 yarn install OR npm install ...

Global site tag (gtag.js) - Google Analytics