【Canvas】线性渐变色例子-垂直方向渐变

2022-01-09 09:35:02 阅读：165 来源： 互联网

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>线性渐变色例子-垂直方向渐变</title>
    </head>

     <body onl oad="draw()">
        <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--

function draw(){
    var canvas=document.getElementById('myCanvus');    
    canvas.width=400;
    canvas.height=400;    

    var ctx=canvas.getContext('2d');   
    ctx.translate(200,200);

    // 从上到下垂直渐变，注意之前有平移
    var linegrad=ctx.createLinearGradient(0,-200,0,200);
    linegrad.addColorStop(0,"white");// 白色
    linegrad.addColorStop(1,"navy");// 海蓝

    ctx.fillStyle=linegrad;
    ctx.fillRect(-200,-200,400,400);
};

//-->
</script>

效果：

END

标签：Canvas,渐变色,渐变,垂直,例子,线性
来源： https://www.cnblogs.com/pyhy/p/15780316.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【Canvas】线性渐变色例子-垂直方向渐变