html5线性渐变方向,使用canvas来完成线性渐变和径向渐变的功能的方法示例
时间: 2024-02-13 13:00:53 浏览: 23
HTML5线性渐变方向可以通过指定起始点和结束点的坐标来控制,示例代码如下:
```html
<canvas id="myCanvas" width="200" height="200"></canvas>
```
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建线性渐变对象
var linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
// 添加渐变颜色
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(0.5, 'green');
linearGradient.addColorStop(1, 'blue');
// 应用渐变
ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 200, 200);
```
而使用canvas来完成线性渐变和径向渐变的功能,则可以使用`createLinearGradient()`和`createRadialGradient()`方法创建渐变对象,并使用`addColorStop()`添加渐变颜色,最后使用`fillStyle`属性将渐变应用到图形上,示例代码如下:
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建线性渐变对象
var linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(0.5, 'green');
linearGradient.addColorStop(1, 'blue');
// 应用线性渐变
ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 200, 200);
// 创建径向渐变对象
var radialGradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'orange');
// 应用径向渐变
ctx.fillStyle = radialGradient;
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI);
ctx.fill();
```