zoukankan      html  css  js  c++  java
  • HTML5创建线条渐变

    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);


  • 相关阅读:
    BETA 版冲刺前准备
    Alpha 事后诸葛亮(团队)
    Learn Docker(一)—软件安装与常规操作
    Alpha 答辩总结
    Alpha 冲刺 (10/10)
    Alpha 冲刺 (9/10)
    Alpha 冲刺 (8/10)
    Alpha 冲刺 (7/10)
    Alpha 冲刺 (6/10)
    团队作业-随堂小测(同学录)
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314309.html
Copyright © 2011-2022 走看看