您的位置：首页 > Web前端 > HTML5

HTML5创建一个径向/圆渐变

2015-12-10 14:26 615 查看

1、设计源码

[html] view
plaincopy

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>HTML5创建一个径向/圆渐变</title>

<script type="text/javascript">

    /**

     * 创建一个径向/圆渐变

     */

    function drawCircle()

    {

        //找到<canvas>元素

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

        //创建context对象

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

        //创建一个径向/圆渐变

        var gradient = ctx.createRadialGradient(200,200,5,90,60,200);

        //方法规定 gradient 对象中的颜色和位置

        gradient.addColorStop(0,"yellow");

        //方法规定 gradient 对象中的颜色和位置

        gradient.addColorStop(1,"blue");

        //设置填充样式

        ctx.fillStyle = gradient;

        //填充一个矩形区域

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

    }

</script>

</head>



<body onLoad="drawCircle();">

   <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.createRadialGradient(200,200,5,90,60,200);

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

[javascript] view
plaincopy

gradient.addColorStop(0,"yellow");

（5）设置填充样式

[javascript] view
plaincopy

ctx.fillStyle = gradient;

（6）填充一个矩形区域

[javascript] view
plaincopy

ctx.fillRect(40,20,600,400);
转载自：http://blog.csdn.net/you23hai45/article/details/50095193

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航