html中渐变怎么写,如何创建渐变 (HTML)
如何创建渐变 (HTML)
03/04/2016
本文内容
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]
形状和线条并不是只能为纯色。用在画布中的渐变实际上是一种类型的颜色值,因此,你可以将它应用于 fillStyle 和 strokeStyle 属性。
渐变可用来在图像中产生密度或颜色在方向上的变化。 这可用于产生背景图像,指出地图中的高度,或者指出你希望向图面中添加照明和底纹的任何位置。
渐变对于简化网页非常有用,因为你可以避免针对这些效果使用图像,还可以最小化加载它们所需的带宽和时间。 而且,由于渐变是以编程方式生成的,因此可以对它们进行方便的缩放和重用。
先决条件
本主题假定你会使用 JavaScript 创建基本 Windows 应用商店应用并在该应用中使用 Windows JavaScript 库模板。有关创建第一个采用 JavaScript 的 Windows 应用商店应用的说明,请参阅创建第一个 Web 应用。有关使用 WinJS 模板的说明,请参阅“如何获取和使用 WinJS 工具包”。
说明
步骤 1: 获取呈现上下文
在将图像绘制到画布上并用渐变对图像进行着色之前,需要从 canvas 元素中获取呈现上下文。呈现上下文是用来定义绘制方法和属性的位置。
为了改进使用 JavaScript 的 Windows 应用商店应用的性能,请等待,直到 HTML 页加载后再执行 JavaScript 代码。这可通过将用来绘制图像的代码放在页面加载之后调用的函数中实现。
window.onload = drawGradient;
function drawGradient() {...
使用 getElementById 检索画布的文档对象模型 (DOM) 节点,然后使用 getContext 方法访问呈现上下文。
不同类型的呈现内容使你能够以不同的方式进行绘制。例如,2D 上下文用于 2D 图形,3D 上下文用于 3D 图形。本主题中的示例使用 2D 呈现上下文。
// Get the canvas element and specify a 2d drawing context.
var context = document.getElementById("canvas").getContext("2d");
步骤 2: 创建渐变
在拥有了呈现上下文之后,可以定义渐变。有两种类型的渐变:线性或直线渐变;径向或圆形渐变。
Linear gradient
线性渐变方法使用四个参数:
createLinearGradient(startX, startY, endX, endY)
第一组有两个参数,它们是渐变起点的 x 和 y 位置;第二组有两个参数,它们是渐变终点的 x 和 y 位置。
垂直线性渐变
在此示例中,为 myGradient 变量分配了 createLinearGradient 方法。在下一步中向渐变中添加颜色时,这一点非常有用。
var myGradient=context.createLinearGradient(0, 0, 200, 0);
若要创建垂直线性渐变,即渐变的底纹从一侧过渡到另一侧,请将渐变起点的 x 和 y 位置设置为 0 和 0,并将终点的 x 和 y 位置设置为 200 和 0。由于 y 值(第 2 个和第 4 个参数)均为 0,因此渐变的底纹会从左侧平滑过渡到右侧。
水平渐变
若要创建从顶部过渡到底部的渐变,请将 x 值(第 1 个和第 3 个参数)保持固定,并使 y 值(第 2 个和第 4 个参数)保持在 0 到画布高度这一范围内。
var myGradient=context.createLinearGradient(0, 0, 0, 100);
对角渐变
你还可以沿着对角线方向创建渐变。 在此示例中,x 和 y 值不同,它们分别设置为 200 和 100。
var myGradient=context.createLinearGradient(0, 0, 200, 100);
Radial gradient
createRadialGradient 方法使用六个参数:
createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)
这些参数包括:
startX 和 startY 是画布上起始圆的 x 和 y 坐标。
startRadius 是起始圆的半径。
endX 和 endY 是画布上圆的结束圆的 x 和 y 坐标。
endRadius 是结束圆的半径。
传统的径向渐变
若要创建"传统的"径向渐变,即颜色从一个圆平滑过渡到另一个圆,需要将这两个圆的 x/y 坐标设置为同一个值,并确保一个渐变圆的 x/y 坐标大于另一个圆的 x/y 坐标。
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
不同的起始位置和结束位置
在上面的径向渐变示例中,起始位置和结束位置的 x/y 坐标相同(分别为 52 和 50),只是每个圆的半径大小从 10 增加到 200。 这会将径向渐变的底纹放在圆的中央。
如果你将起始位置和结束位置之间的距离进一步加大,你将最终获得一个锥形,就好像在画布上将渐变拉伸了一样。
var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
在此示例中,起始圆的 x 和 y 坐标分别为 32 和 30,它的半径为 5。 结束圆的 x 和 y 坐标分别为 60 和 60,它的半径较大,为 50。 下面是结果:
步骤 3: 设置颜色停止点
一个渐变有两种或多种 addColorStop 方法:
addColorStop(offset, color)
若要添加颜色停止点,需要指定要应用的颜色,以及颜色沿着渐变的偏移位置。渐变位置可以是 0(渐变的起点)到 1(渐变的终点)之间的任何位置。
在我们的示例中,myGradient 变量用于将 addColorStop 设置为 0 到 1 的值,以便渐变的底纹从白色平滑过渡到黑色。
myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");
多个颜色停止点
你可以使用多个颜色停止点。在此示例中,第二个 addColorStop 在渐变的中间位置分配一个颜色停止点:
myGradient.addColorStop(0,"orange");
myGradient.addColorStop(.5, "green");
myGradient.addColorStop(1, "blue");
将生成下面的渐变:
步骤 4: 设置填充样式
在绘制渐变之前,必须将 fillStyle 设置为 myGradient。
context.fillStyle = myGradient;
最后,使用 fillRect 方法绘制图像:
context.fillRect(0, 0, 200, 100);
完整示例
线性渐变
此 JavaScript 代码使用 canvas 元素绘制一个矩形,然后使用对角线性渐变作为该矩形的 fillStyle。
window.onload = drawGradient;
function drawGradient() {
// Get the canvas element and specify a 2d drawing context.
var context = document.getElementById("canvas").getContext("2d");
// Create a linear gradient.
var myGradient=context.createLinearGradient(0, 0, 300, 100);
// Set the color stops.
myGradient.addColorStop(0, "white");
myGradient.addColorStop(1, "black");
// Set the fill style to the gradient.
context.fillStyle = myGradient;
// Draw the rectangle.
context.fillRect(0, 0, 200, 100);
}
径向渐变
此 JavaScript 代码使用 canvas 元素绘制一个圆,然后使用径向渐变作为该圆的 fillStyle。
window.onload = drawGradient;
function drawGradient() {
// Get the canvas element and specify a 2d drawing context.
var context = document.getElementById("canvas").getContext("2d");
// Create the radial gradient.
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
// Set the color stops.
myGradient.addColorStop(0, "white");
myGradient.addColorStop(1, "black");
// Set the fill style to the gradient.
context.fillStyle = myGradient;
// Draw a circle.
context.beginPath();
context.arc(52, 50, 40, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
级联样式表 (CSS)
这是在 canvas 元素周围创建灰色边框的 CSS 的示例。
/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }
HTML 文件
此 HTML 文件创建一个 canvas 元素并使用外部 JavaScript 和 CSS 文件。
相关主题
html中渐变怎么写,如何创建渐变 (HTML)相关推荐
- html中渐变怎么写,css颜色渐变怎么写?
CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class.ID或JavaScript. css颜色渐变可以使用css3的渐变(gradient ...
- html渐变线条代码,css3线性渐变语法的详解(代码示例)
本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 线性渐变的完整语法:.demo { background: line ...
- java 绘图 渐变_如何在Java 2D中创建渐变绘画?
要更改图形形状的颜色,我们可以使用setPaint()方法.对于简单的着色,我们可以将颜色对象传递给此方法,例如Color.RED或Color.GREEN. 如果要使用渐变绘画进行绘画,则可以使用Gr ...
- AI教程 如何在 Illustrator 中创建渐变颜色?
欢迎观看Illustrator教程,小编带大家学习 Illustrator 的基本工具和使用技巧,了解如何在 Illustrator 中使用不同类型的渐变,以及对图稿应用线性和放射性渐变. 在 Ill ...
- 《Unity着色器和屏幕特效开发秘笈》—— 1.7 创建渐变纹理来控制漫反射着色...
本节书摘来自华章出版社<Unity着色器和屏幕特效开发秘笈>一 书中的第1章,第1.7节,作者:(美)Kenny Lammers,更多章节内容可以访问云栖社区"华章计算机&quo ...
- html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
- 沿环形路径创建渐变画笔
沿环形路径创建渐变画笔 <Windowx:Class="WpfApp5.MainWindow"xmlns="http://schemas.microsoft.com ...
- ansys的kbc_在Ansys中施加阶跃载荷和渐变载荷的方法 | 坐倚北风
1.阶跃载荷和渐变载荷的区别 在工程中施加载荷的方式有两种基本方式:阶跃载荷和渐变载荷.前一种方式载荷被突然施加到对象上:而后一种方式,载荷被缓缓地施加到对象上. 在Ansys中,虽然在载荷步的时间终 ...
- CorelDRAW中如何设置调和对象颜色渐变
通过调整调和对象属性,可以更改调和效果的外观.调和对象属性包括调和对象之间的数量和间距.调和对象颜色渐变.调和映射到的节点.调和的路径以及起始对象和结束对象.本教程将详解CorelDRAW中如何设置调 ...
最新文章
- netapp存储服务器文档,NetApp秘密开发服务器闪存?
- DataBinder
- 日调度5万亿次,腾讯云微服务架构体系TSF深度解读
- 为什么WEB-INF外的jsp无法根据cookie享受国际化
- 用u盘做引导,往硬盘中安装ubuntu
- STL里resize和reserve的区别?
- Vim杂记:Sublime的配色方案
- GDI+ 使用指南(basic guiding of GDI plus )
- 记忆化搜索 codevs 2241 排序二叉树
- hypot函数_hypot()函数与C ++中的示例
- X509TrustManager信任SSL证书
- (一) JAVA Swing:Swing快捷开发工具集-v0.01
- C#邮件过滤系统(论文+可执行程序+源码+外文翻译+程序操作演示录像)
- 华为MatePad Pro和华为MatePad区别
- UT-Exynos4412 三星ARM四核旗舰开发平台android4.0体验-13串口功能调试
- verilog的一些技巧,就靠他拿offer了!
- 计算机关机重启命令,怎么使用dos命令重启电脑?用dos命令重启电脑关机的方法...
- Linux系统管理上机作业1
- 普元 AppServer 6.5 支持哪些日志级别?
- JAVA实现Date日期加一天