专业编程基础技术教程

网站首页 > 基础教程 正文

canvas——线性渐变填充 渐变工具线性填充

ccvgpt 2024-10-12 13:34:34 基础教程 8 ℃

canvas不仅可以做到渐变的效果,还可以指定线性渐变或圆形渐变

1 线性渐变

canvas——线性渐变填充 渐变工具线性填充

首先必须先使用createLinearGradient方法创建Linear Gradient对象,之后再用addColorStop方法添加渐变色,并指定给fillStyle或strokeStyle属性使用。

声明Linear Gradient对象

context.createLinearGradient(xS,yS,xE,yE);

(xS,yS)是渐变起点的坐标,(xE,yE)是渐变终点的坐标,改变起点与终点坐标就可以调整渐变的方向。

设置渐变颜色

设置渐变颜色的方法是addColorStop()

gradient.addColorStop(stop,color);

参数中的stop用来设置渐变色的位置,其值必须位于0.0-1.0,例如,渐变想要在图形中间变换颜色,那么stop参数值就设置为0.5;

在30%的位置变换颜色,那么stop参数值就设为0.3。参数color用来指定渐变的颜色,如果要绘制多少渐变,就可以依次增加addColorStop()方法。

gradient.addColorStop(0,"red");

gradient.addColorStop(0.5,"green");

gradient.addColorStop(1,"blue");

详细步骤：

//声明Linear Gradient对象

var my_gradient = context.createLinerGradient(0,0,0,170);

//设置渐变色

my_gradient.addColorStop(0,"#ff0000");

my_gradient.addColorStop(0,"#ffe1ff");

//将渐变色指定给fillStyle

context.fillStyle = my_gradient;

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset=" ">
<title>ch10_09</title>
<script type="text/javascript">
function draw() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    // 建立渐变
    var lingrad = ctx.createLinearGradient(0,0,150,150);
    lingrad.addColorStop(0, "#FF0000");
    lingrad.addColorStop(0.5, "#00FF00");
    lingrad.addColorStop(1, "#0000FF");
    // 分配渐变给填充和边线样式
    ctx.fillStyle = lingrad;
    ctx.fillRect(10,10,130,130);
}
</script>
<!--style标记内是CSS语法-->
<style type="text/css">
canvas { border: 1px solid black; } //将框线设为1px
</style>
</head>
<body>
<input type="button" value=" 渐变 " onclick="draw();">
<p>
<canvas id="myCanvas" width="150" height="150"></canvas>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表