HTML5 Canvas5

简介: Canvas 的渐变功能允许在各种形状上(如矩形、圆形、线条和文本)应用自定义颜色渐变。通过 `createLinearGradient` 和 `createRadialGradient` 方法可分别创建线性和径向渐变。渐变需定义两个或更多颜色停止点,使用 `addColorStop` 方法设定。最后,将渐变对象赋值给 `fillStyle` 或 `strokeStyle` 并绘制形状即可实现渐变效果。

Canvas - 渐变

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

以下有两种不同的方式来设置Canvas渐变:

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

当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.

使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。

使用 createLinearGradient():
实例

创建一个线性渐变。使用渐变填充矩形:

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
var 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:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
var 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);

相关文章
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
Rust JavaScript 前端开发
【Rust 实战】Rust 与 Wasm
【Rust 实战】Rust 与 Wasm
2659 0
【Rust 实战】Rust 与 Wasm
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
656 0
|
11月前
|
传感器 芯片 SoC
分辨GPIO定义
GPIO(通用输入输出接口)是微控制器上的引脚,用于连接外部设备,可配置为输入或输出模式。引脚编号有物理编号(BOARD模式)和BCM编号两种,前者按实际位置编号,后者基于芯片内部通道。GPIO引脚可读取外部信号(输入)或发送信号(输出),具体功能和配置需参考芯片手册。
|
11月前
|
人工智能 程序员 Python
大会日程公布|PyCon China 2024 周末上海见!
大会日程公布|PyCon China 2024 周末上海见!
|
11月前
|
JSON 人工智能 自然语言处理
剖析大模型连“Strawberry”的“r”都数不对的原因
本文将从两个常见的大模型翻车问题入手解析这些问题背后体现的大模型技术原理,并解释了为什么会导致这些问题,接着我们利用CoT(思维链)方法解决这些问题并基于上述原理试图剖析CoT方法起作用的可能原因,最后提出【理由先行】风格这一简单有效的Prompt Trick。
1397 36
|
12月前
|
机器学习/深度学习 自然语言处理 并行计算
深度学习笔记(十四):Transormer知识总结
关于深度学习中Transformer模型的知识总结,涵盖了Self-attention机制、QKV、Multi-head attention、位置编码和并行运算等关键概念,以及如何在PyTorch中实现Self-attention。
185 1
|
11月前
|
JSON API 数据格式
BING壁纸免费API接口教程
接口简介:获取每日不同的必应官方壁纸。请求地址:https://cn.apihz.cn/api/img/bingapi.php,支持POST或GET请求。需提供用户ID、用户KEY及返回格式(JSON/TXT)。返回状态码和图片地址或错误信息。示例及详细文档见官网。
|
小程序
在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面
在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面
838 1
|
存储 编解码 网络协议
音视频编程ffmepg中的关键术语与概念:深度解析与实践(一)
音视频编程ffmepg中的关键术语与概念:深度解析与实践
404 0