canvas中如何设置渐变色

CanvasGradient在canvas中是专门设置颜色渐变的一个类。它分为两种，一种是createLinearGradient()，即线性渐变；另一种是createRadialGradient()，即径向渐变；在设置之前，需要了解它们的使用方法：CanvasGradient.addColorStop(offset(0-1),color),offset是偏移值，它的值在0-1之间，color是要渐变的颜色。下来分别看这两种渐变的设置方法。

<body>         <canvas id="box" width="800px" height="400px"></canvas>
</body>

    第一种：线性渐变createLinearGradient(X1,Y1,X2,Y2),它需要传递4个参数，X1,Y1分别代表起始点的坐标，X2,Y2分别代表结束点的坐标，返回值是一个CanvasGradient类型的对象。 具体示例代码如下：

var canvasEle=document.querySelector("#box")
var context=canvasEle.getContext("2d")
//创建线性渐变的方法->CanvasGradient类型的对象
var linearGradient= context.createLinearGradient(0,0,100,100);
linearGradient.addColorStop(0,"skyblue")
linearGradient.addColorStop(1,"darkturquoise")
//添加渐变颜色
context.fillStyle=linearGradient;
context.fillRect(0,0,100,100)

    第二种：径向渐变createRadialGradient(X1,Y1,Z1,X2,Y2,Z2)需要传递的参数有6个，X1,Y1,Z1分别代表起始圆的圆心和半径，X2,Y2,Z2分别代表结束圆的圆心和半径。具体示例如下：

var canvasEle=document.querySelector("#box")
var context=canvasEle.getContext("2d")
var radialGradient=context.createRadialGradient(350,50,100,350,50,0)
radialGradient.addColorStop(0,"red");
radialGradient.addColorStop(1,"white");
context.fillStyle=radialGradient;
context.fillRect(300,0,100,100)

canvas中如何设置渐变色相关推荐

小程序中wxss设置渐变色背景的方法
参考链接:微信小程序用CSS(.wxss)设置背景颜色渐变的方法_幕尘枫的博客-CSDN博客_微信小程序渐变背景色主要方法: page {background: -webkit-linear-gr ...
CSS中背景设置——渐变色和放射渐变
渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果渐变是图片,通过 background-image设置一.渐变色可选值 1: linear-gradient [ ...
Canvas画图设置渐变色
1.线形图设置填充色为渐变色方法: /*** Draws the provided path in filled mode with the provided drawable.** @param c ...
html设置渐变色背景图片,css中渐变色作为背景图来使用总结
qt中使用样式设置渐变色背景setStyleSheet()函数设置背景的前期是设置的窗口控件有父窗口ui.widget->setStyleSheet("background-color ...
vue项目中 echarts的渐变色的设置
实现效果 2 设置渐变色 areaStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: ...
html中怎么设置渐变颜色设置,css中渐变色怎么设置
这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法,现在分享给大家,也给大家做个参考. css中渐变色怎么设置 css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之间的线性 ...
vue中动态设置背景渐变色
vue中动态设置背景渐变色 1.效果展示 2.核心(动态更换单一的背景颜色也可以使用) <div class="ss" v-bind:style="{ backgr ...
html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果
2016年我写过一篇文章如何使用SVG图标,其"试验性部分"的结语是个警告 - "抱歉,渐变填充无法工作". 我指的是像fill: linear-gradien ...
canvas笔记-在canvas中使用其他HTML元素
这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮.然后使用JavaScript获取按钮的数据或者 ...

canvas中如何设置渐变色

canvas中如何设置渐变色相关推荐

最新文章

热门文章