Canvas 填充渐变

Canvas的渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

注意：使用渐变必须使用两种或两种以上的颜色。

Canvas渐变有两种方法：

线性渐变 createLinearGradient(x1, y1, x2, y2)
x1、y1表示渐变色开始点的坐标
x2、y2表示渐变色结束点的坐标
注：渐变的方向是从 x1y1 到 x2y2，如果y相同，那就是从左到右渐变，如果x相同，就是从上到下渐变，斜着渐变就需要自己调整两个位置的坐标了
径向/圆渐变 createRadialGradient(x1, y1, r1, x2, y2, r2)
x1、y1表示渐变开始圆心的坐标，r1表示渐变开始圆心的半径
x2、y2表示渐变结束圆心的坐标，r2表示渐变结束圆的半径。
注：当起点圆与终点圆的圆心坐标相同时，会有一种圆形渐变的效果

Canvas添加颜色的方法（指定停止颜色）：addColorStop(value, color)
value：坐标来描述渐变的位置，取值 0~1（可以理解成整个渐变是0-100%的位置，从而设定在百分比位置的颜色）
color：渐变结束的颜色（停止颜色）

示例：

线性渐变：

// myCanvas 是canvas标签的ID
var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {let ctx = canvas.getContext("2d");let grad = ctx.createLinearGradient(0, 150, 200, 150);  // 创建一个渐变色线性对象grad.addColorStop(0, "rgba(240,250,40,1)"); // 设置渐变颜色grad.addColorStop(0.25, "rgba(327,201,64,1)");grad.addColorStop(0.5, "rgba(22,184,200,1)");grad.addColorStop(1, "rgba(82,67,192,1)");ctx.fillStyle = grad;  // 设置fillStyle为当前的渐变对象ctx.fillRect(0, 0, 400, 400); // 绘制渐变图形
}

径向/圆渐变

var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {let ctx = canvas.getContext("2d");let grad = ctx.createRadialGradient(200, 200, 50, 260, 260, 200) // 创建一个渐变色径向/圆对象// let grad = ctx.createRadialGradient(200, 200, 50, 200, 200, 200) // 圆形渐变效果grad.addColorStop(0, "rgba(240,250,40,1)"); // 设置渐变颜色grad.addColorStop(0.25, "rgba(327,201,64,1)");grad.addColorStop(0.5, "rgba(22,184,200,1)");grad.addColorStop(1, "rgba(82,67,192,1)");ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象ctx.fillRect(0, 0, 500, 500); // 绘制渐变图形
}

Canvas 填充渐变相关推荐

HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状
本篇教程探讨了HTML5 canvas图和实现填充渐变形状,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html PUBLIC "-//W3C/ ...
说说在 Canvas 中如何填充渐变颜色
渐变颜色填充方式有两种:线性或径向. 线性渐变填充会创建一个水平 . 垂直或者对角线的填充图案. 径向渐变填充会自中心点创建一个放射状填充图案. 1 线性渐变 1.1 线性水平渐变 (1)基本形状 S ...
canvas 线条渐变追逐_canvas之渐变
timg (1).jpg 渐变 Gradients 可以用线性或者径向的渐变来填充或描边赋给图形的 fillStyle 或 strokeStyle 属性. 渐变可以填充在矩形, 圆形, 线条, 文本等 ...
html5 Canvas颜色渐变（画图很重要）
如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color stroke ...
canvas填充规则
canvas填充规则 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d');ctx ...
php gd 描边,HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边. 一:颜色填充与描边 ...
canvas填充和描边介绍
:点上面关注免费学习前端知识! 2D上下文的两种基本绘图操作是填充和描边.填充,就是用指定的样式(颜色.渐变或图像)填充图形:描边,就是只在图形的边缘画线.大多数2D上下文操作都会细分为填充和描边两个 ...
Cesium:结合canvas添加渐变背景色
Wall墙体渐变 Cesium开发中,添加Wall墙体,通常是通过指定Cesium.Wall的material属性来实现颜色填充的.而material属性对应的Cesium.Material提 ...
canvas线性渐变实现：根据渐变线角度计算坐标x0,y0,x1,y1
背景某些情况下可能需要使用canvas实现线性渐变,需求是渐变色恰好填充整个画布,并且渐变的方向不是水平或垂直的,而是任意角度的,举个css3实现的栗子: background: linear-gr ...

Canvas 填充渐变

Canvas 填充渐变相关推荐

最新文章

热门文章