HTML Canvas 渐变

2024-07-15 13:50| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 HTML 图形 HTML 图形 HTML 绘图 Graphics Canvas Plotly.js Chart.js Google D3.js 谷歌地图 Maps 简介 Maps 基础 Maps 叠加层 Maps 事件 Maps 控件 Maps 类型 Maps 参考手册 SVG 教程 SVG 简介 SVG 嵌入 HTML SVG 矩形 SVG 圆形 SVG 椭圆 SVG 直线 SVG 多边形 SVG 折线 SVG 路径 SVG 文本 SVG 笔触 SVG 滤镜 SVG 模糊 SVG 阴影 SVG 线性渐变 SVG 径向渐变 SVG 实例 SVG 参考手册 Canvas 教程 Canvas 简介 Canvas 绘制 Canvas 坐标 Canvas 直线 Canvas 形状 Canvas 矩形 Canvas 圆形 Canvas 曲线 Canvas 渐变 Canvas 文本 Canvas 图像 Canvas 时钟时钟简介时钟钟面时钟数字时钟指针时钟启动 HTML 游戏游戏简介游戏画布游戏组件游戏控制器游戏障碍游戏分数游戏图像游戏声音游戏重力游戏弹跳游戏旋转游戏运动 HTML Canvas 渐变 Canvas 曲线 Canvas 文本画布 - 渐变

渐变可用于填充矩形、圆形、线条、文本等。画布上的形状并不限于纯色。

有两种不同类型的渐变：

createLinearGradient(x,y,x1,y1) - 创建线性渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建径向/圆形渐变

一旦我们有了渐变对象，就必须添加两个或更多色标。

addColorStop() 方法规定颜色的停止点及其沿渐变的位置。渐变位置可以是 0 到 1 之间的任意位置。

要使用渐变，请将 fillStyle 或 strokeStyle 属性设置为渐变，然后绘制形状（矩形、文本或线条）。

Canvas - Gradients 使用 createLinearGradient() 实例

创建线性渐变。用渐变填充矩形：

JavaScript:

const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); // 创建渐变 const grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 用渐变填充 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80);

亲自试一试

使用 createRadialGradient(): 实例

创建径向/圆形渐变。用渐变填充矩形：

JavaScript:

const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); // 创建渐变 const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 用渐变填充 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80);

亲自试一试

另请参阅：

W3School 的完整 Canvas 参考手册

Canvas 曲线 Canvas 文本 Canvas API

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

公司简介

联系我们