HTML5创建线条渐变

来源：互联网发布：深圳国税开票软件下载编辑：程序博客网时间：2024/04/28 23:43

HTML5创建线条渐变

1、设计源码

<!doctype html><html><head><meta charset="utf-8"><title>HTML5创建线条渐变</title><script type="text/javascript">    /** * 创建线条渐变 */function drawGradualText(){//找到<canvas>元素var canvas = document.getElementById("canvas");//创建context对象var ctx = canvas.getContext("2d");//创建线条渐变var gradient = ctx.createLinearGradient(0,0,400,0);//方法规定 gradient 对象中的颜色和位置gradient.addColorStop(0,"yellow");//方法规定 gradient 对象中的颜色和位置gradient.addColorStop(1,"blue");//设置填充样式ctx.fillStyle = gradient;//填充一个矩形区域ctx.fillRect(40,20,600,400);}</script></head><body onLoad="drawGradualText();">   <canvas id="canvas" width="1000" height="800"></canvas></body></html>

2、实现结果

3、源码说明

（1）找到<canvas>元素

var canvas = document.getElementById("canvas");

（2）创建context对象

var ctx = canvas.getContext("2d");

（3）创建线条渐变

var gradient = ctx.createLinearGradient(0,0,400,0);

（4）规定 gradient 对象中的颜色和位置

gradient.addColorStop(0,"yellow");gradient.addColorStop(1,"blue");

（5）设置填充样式

ctx.fillStyle = gradient;

（6）填充一个矩形区域

ctx.fillRect(40,20,600,400);

1 0