1、HTML实现渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#week{
width: 600px
height: 600px
background: linear-gradient(red, yellow, blue)
border-radius: 300px
}
</style>
</head>
<body>
<div id="week">
</div>
</body>
</html>
2、实现效果
html设置一个正方形渐变html设置一个正方形渐变,CSS3 渐变
勋哥很忙
转载
关注
0点赞·582人阅读
CSS3 渐变(Gradients)
渐变效果
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变(gradients)，你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients)：
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性
background-image
1.0
4.0
1.0
1.0
3.5
注意：IE8 及更早版本的 IE 浏览器不支持该属性。
CSS3 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向(或一个角度)。
线性渐变的实例：
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
线性渐变 - 从上到下(默认情况下)
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
实例
从上到下的线性渐变：
#grad{background-image:linear-gradient(#e66465,#9198e5)}
尝试一下 »
线性渐变 - 从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：
实例
从左到右的线性渐变：
#grad{height:200pxbackground-image:linear-gradient(toright,red,yellow)}
尝试一下 »
线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色，慢慢过渡到黄色：
实例
从左上角到右下角的线性渐变：
#grad{height:200pxbackground-image:linear-gradient(tobottomright,red,yellow)}
尝试一下 »
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向(to bottom、to top、to right、to left、to bottom right，等等)。
语法
background-image: linear-gradient(angle, color-stop1, color-stop2)
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器(Chrome、Safari、firefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
下面的实例演示了如何在线性渐变上使用角度：
实例
带有指定的角度的线性渐变：
#grad{background-image:linear-gradient(-90deg,red,yellow)}
尝试一下 »
使用多个颜色节点
下面的实例演示了如何设置多个颜色节点：
实例
带有多个颜色节点的从上到下的线性渐变：
#grad{background-image:linear-gradient(red,yellow,green)}
尝试一下 »
下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：
实例
#grad{/*标准的语法*/background-image:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet)}
尝试一下 »
使用透明度(transparent)
CSS3 渐变也支持透明度(transparent)，可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：
实例
从左到右的线性渐变，带有透明度：
#grad{background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1))}
尝试一下 »
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
实例
一个重复的线性渐变：
#grad{/*标准的语法*/background-image:repeating-linear-gradient(red,yellow10%,green20%)}
尝试一下 »
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下，渐变的中心是 center(表示在中心点)，渐变的形状是 ellipse(表示椭圆形)，渐变的大小是 farthest-corner(表示到最远的角落)。
径向渐变的实例：
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color)
径向渐变 - 颜色节点均匀分布(默认情况下)
实例
颜色节点均匀分布的径向渐变：
#grad{background-image:radial-gradient(red,yellow,green)}
尝试一下 »
径向渐变 - 颜色节点不均匀分布
实例
颜色节点不均匀分布的径向渐变：
#grad{background-image:radial-gradient(red5%,yellow15%,green60%)}
尝试一下 »
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
实例
形状为圆形的径向渐变：
#grad{background-image:radial-gradient(circle,red,yellow,green)}
尝试一下 »
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner
实例
带有不同尺寸大小关键字的径向渐变：
#grad1{background-image:radial-gradient(closest-sideat60%55%,red,yellow,black)}#grad2{background-image:radial-gradient(farthest-sideat60%55%,red,yellow,black)}
尝试一下 »
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
实例
一个重复的径向渐变：
#grad{background-image:repeating-radial-gradient(red,yellow10%,green15%)}
尝试一下 »
步骤 1: 在 HTML 中设置画布，创建一个引用，并获取上下文对象
画布在 HTML 中通过 <canvas>标签定义。与其他标签类似，<canvas>的属性（如宽度和高度）作为特性输入。假设你希望创建一个宽 500 像素、高 500 像素的画布，并将其命名为“can1”，稍后在 JavaScript 中引用它时将用到。
在 HTML 文档中输入 <canvas>标签。
<canvas id="can1" width="500" height="500"></canvas>在 JavaScript 文档中，创建一个变量，在编写脚本时该变量将代替“can1”。这里，我们将该变量命名为“myCanvas”，并使用 getElementById 将其链接到“can1”。
var myCanvas = document.getElementById("can1")画布的 CanvasRenderingContext2D 对象具有 *** 作画布的所有命令。 这里，在上下文对象中检索“can1”。将此变量称为“myContext”。
var myContext = myCanvas.getContext("2d")步骤 2: 绘制矩形、直线、贝塞尔曲线、圆和形状
在画布上绘制简单的线条非常容易。使用 JavaScript 的 moveTo 方法可设置线条开始位置的坐标。然后只需使用另一方法设置终点。 第二步可以使用若干方法，每种方法专用于帮助呈现一种不同的线型，无论是直线、贝塞尔曲线还是圆弧。若要将线条合并为形状，可以闭合对 beginPath 和 closePath 方法调用中的线条。在指定所需的外观之后，可以使用 fill 方法应用颜色，并使用 stroke 方法执行线条和形状的呈现。
应用一些基本风格。这里，通过使用 fillStyle 属性绘制一个黑色矩形，将画布背景设置为黑色 (#000)。然后使用 strokeStyle 属性将线条颜色设置为白色 (#fff)，使用 fillRect 方法应用黑色背景，并使用 lineWidth 属性将线条的粗细设置为 3 个像素。
// Specify a black background, and white lines that are 3 pixels thick.
myContext.fillStyle = '#000'
myContext.strokeStyle = '#fff'
myContext.fillRect(0,0,500,500)
myContext.lineWidth = 3myContext.fill()
在后续步骤中，将在这个 500×500 的黑色画布上继续构建。
现在，准备在画布的黑色表面绘制一个白色线条。先从直线开始。
使用 moveTo 方法设置直线的起点，使用 lineTo 方法设置终点。
这些方法采用两个数字作为参数。第一个数字表示 x 轴坐标，或者表示此坐标定义的自画布左侧算起的像素数。第二个数字是从顶部开始测量的 y 轴坐标。
// Draw a line that starts at the upper left corner of the canvas and ends at the lower right.
myContext.moveTo(0,0)
myContext.lineTo(500,500)
myContext.stroke()
若要绘制二次贝塞尔曲线，请使用 quadraticCurveTo 方法，该方法采用两个坐标—曲线的一个控制点和一个端点。
// Draw a swooping curve that spans the width of the canvas.myContext.moveTo(0,0)
myContext.quadraticCurveTo(0,500,500,250)
myContext.stroke()
若要绘制三次贝塞尔曲线，请使用 bezierCurveTo 方法，该方法采用三个坐标—曲线的两个控制点和一个端点。
// Draw a V-shaped Bezier curve that spans the entire canvas.myContext.moveTo(0,0)
myContext.bezierCurveTo(500, 820, 0, 500, 500, 0)
myContext.stroke()
若要创建一个圆，请使用 arc 方法：在设置用于绘制圆形轮廓的原点时，请确保将 moveTo 方法设置在沿线条路径的位置上，否则圆上将有一条通向 moveTo坐标的“尾巴”。
// Draw a circle that spans the width of the canvas.myContext.moveTo(500,250)
myContext.arc(250,250,250,0,Math.PI*2,true)
myContext.stroke()
通过闭合对 beginPath 和 closePath 调用中的多个线条，可以从上述线条的任意组合中绘制一个 2D 形状。然后，整个形状可以使用 fill 接收一种颜色。前面设置的笔划样式将创建白色线条，在与应用于主体的红色 (#f00) 合并时，该形状将继承双色调外观。
// Draw a red diamond that spans the entire canvas.myContext.fillStyle = '#f00'
myContext.beginPath()
myContext.moveTo(250,0)
myContext.lineTo(0,250)
myContext.lineTo(250,500)
myContext.lineTo(500,250)
myContext.closePath()
myContext.fill()
步骤 3: 显示位图图像
位图图像（如 .jpg、.png 和 .gif 文件）可以放置在画布上，甚至可以在代码中缩放和裁剪，不会触及原始文件。若要添加位图图像，请指定该图像的 URI，然后使用 drawImage 方法在画布上指定其位置。使用可选参数可将图像缩放到指定的大小，甚至仅显示图像的一个片段，这对于实现滚动背景或使用子画面表动态显示子画面等 *** 作非常有用。
若要在屏幕上绘制位图图像而不进行任何修改，请指定要用于左上角的 x 坐标和 y 坐标。
// Draw an image at the upper left corner of the canvas (0, 0).var myImg = new Image()
myImg.src = 'myImageFile.png'
myContext.drawImage(myImg, 0, 0)
若要缩放图像，可在末尾添加两个数字，分别代表宽度和高度。如果有帮助，不妨将后两个数字视为“右部”和“底部”，而不是“宽度”和“高度”。
// Scale the image to span the entire 500 x 500 canvas.var myImg = new Image()
myImg.src = 'myImageFile.png'
myContext.drawImage(myImg, 0, 0, 500, 500)
若要仅使用图像的一个切片，则需要定义两个矩形区域，对 drawImage 的调用提高到 9 个参数（第一个参数是 JavaScript 图像对象）。要传入的前四个数字表示图像的切片。后四个数字表示要显示该切片的画布区域。
// Take a 20 x 20 slice from the upper left of the image and scale it to span the entire 500 x 500 canvas.var myImg = new Image()
myImg.src = 'myImageFile.png'
myContext.drawImage(myImg, 0, 0, 20, 20, 0, 0, 500, 500)
步骤 4: 渐变
任何人只要熟悉在图形设计程序中定义渐变的常见方式，都会喜欢使用 JavaScript 代码定义渐变的简单性。在设计程序中是选择颜色，渐变中的颜色位置使用水平滑块设置。JavaScript 中的唯一区别是使用从 0 到 1 范围内的小数值代替滑块。
在设计程序中，线性渐变使用线条在图像上定位，线条的开始和结束位置确定方向和缩放级别。在 JavaScript 中，该线条使用两对 x、y 轴坐标绘制。然后将 4 个数字传递到 createLinearGradient 方法以创建 CanvasGradient 对象。在定义渐变对象的属性之后，就会得到所需的渐变，CanvasGradient 作为 fillStyle 传递到 fillRect 方法进行呈现。
// Render a white, red and black gradient diagonally across the canvas.var myGradient = myContext.createLinearGradient(0,0, 500,500) // gradient starts at upper left and ends at lower right
myGradient.addColorStop(0,"#fff") // white at the beginning of the gradient
myGradient.addColorStop(0.5,"#f00")// red in the middle of the gradient
myGradient.addColorStop(1,"#000") // black at the end of the gradient
myContext.fillStyle = myGradient // ensure the next call to fillRect will use the specified gradient
myContext.fillRect(0,0,500,500) // rectangle that contains the gradient spans the entire canvas
径向渐变的定义方式稍有不同。为渐变的起点和终点绘制两对 x、y 轴坐标—，这与线性渐变中一样—，但每个坐标对都有第三个与其关联的 z 轴坐标，用于定义半径。可以想像为围绕一个坐标绘制一个圆，该坐标位于中心 (250, 250)，绘制的圆的大小以像素为单位定义。这样定义两个圆之后，一个圆较小，一个圆跨整个画布，有 6 个数字传递到 createRadialGradient。在呈现时，径向渐变在两个圆之间的空间中绘制，颜色等级与圆的半径的大小成正比。
// Render a white, red and black radial gradient spanning the canvas.var myGradient = myContext.createRadialGradient(250,250,0, 250,250,500) // gradient is centered and spans the entire canvas
myGradient.addColorStop(0,"#fff") // white at the beginning of the gradient
myGradient.addColorStop(0.5,"#f00") // red in the middle of the gradient
myGradient.addColorStop(1,"#000") // black at the end of the gradient
myContext.fillStyle = myGradient // ensure the next call to fillRect will use the specified gradient
myContext.fillRect(0,0,500,500) // rectangle that contains the gradient spans the entire canvas
步骤 5: 动画
可以使用多种方法绘制动画。
对于画布内的元素，JavaScript 提供了 setInterval 方法，该方法计划一个重复调用的函数，每经过定义的时间间隔便调用一次该函数。在该函数中，需要重绘画布来反映对其上呈现的对象的更改。下面是一个示例，其中一个函数初始化该动画，将呈现频率计划为大约每秒 60 帧（每 13.33 毫秒一帧），并且重复调用该函数将重绘画布。在本例中，径向渐变从一个小点逐渐增大，直到填充整个画布。
// Generate an animation of a growing gradient.// These variables must exist globally so both functions can access them.
var myCanvas
var myContext
var outerBoundary = 0, innerBoundary = 0
// Start the animation.
window.onload = initialize
function initialize() {
myCanvas = document.getElementById("can1")
myContext = myCanvas.getContext("2d")
setInterval("redrawCanvas()",13) // redraw @ approximately 60 frames per second
}
// Run the animation.
function redrawCanvas() {
if (outerBoundary < 500) {
outerBoundary++ // grow the size of the gradient
} else {
innerBoundary++ // grow the size of the inner white circle if red is maxed
}
var myGradient = myContext.createRadialGradient(250,250,innerBoundary, 250,250,outerBoundary)
myGradient.addColorStop(0,"#fff") // white at the beginning of the gradient
myGradient.addColorStop(0.5,"#f00") // red in the middle of the gradient
myGradient.addColorStop(1,"#000") // black at the end of the gradient
myContext.fillStyle = myGradient // ensure the next call to fillRect will use the specified gradient
myContext.fillRect(0,0,500,500) // rectangle that contains the gradient spans the entire canvas
}
CSS3 转换和动画可用于转换画布本身和画布外部的对象。
此外，新的 WinJS 库有许多高度优化的动画，创建这些动画是为了模拟原有 Windows 动画的行为。 WinJS 动画有助于为你的应用 UI 提供一个高度集成的外观。有关详细信息，请参阅WinJS.UI.Animation 命名空间。
步骤 6: 更多 HTML5 画布提示
可以使用一系列属性（shadowColor、shadowBlur、shadowOffsetX 和 shadowOffsetY）应用阴影。
可以使用 createPattern 方法作为一种模式重复画布中的元素。
可以使用 save 方法保存画布状态，然后执行更改，再使用 restore 方法还原以前的状态。该方法很好用，函数甚至不需要采用参数。
可以使用 globalCompositeOperation 属性定义两个画布元素重叠时会发生什么情况。 使用此属性始终可以定义在源或新元素级别发生的情况。可以执行的 *** 作有颜色混合、遮蔽和更改重叠优先级等。
注意 globalCompositeOperation 主题使用源表示新元素，使用目标表示以前存在的元素。
可以使用 strokeText 方法将文本添加到画布。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）