HTML5创建线条渐变

来源：互联网发布：工程宝软件sdk 编辑：程序博客网时间：2024/04/28 17:19

1、设计源码

[html] view plaincopy
<!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>元素

[javascript] view plaincopy
var canvas = document.getElementById("canvas");  

（2）创建context对象

[javascript] view plaincopy
var ctx = canvas.getContext("2d");  

（3）创建线条渐变

[javascript] view plaincopy
var gradient = ctx.createLinearGradient(0,0,400,0);  

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

[javascript] view plaincopy
gradient.addColorStop(0,"yellow");  
gradient.addColorStop(1,"blue");  

（5）设置填充样式

[javascript] view plaincopy
ctx.fillStyle = gradient;  

（6）填充一个矩形区域

[javascript] view plaincopy
ctx.fillRect(40,20,600,400);  

转载自：http://blog.csdn.net/you23hai45/article/details/50095051

0 0