画布(Canvas)实现颜色渐变

最新推荐文章于 2023-09-12 22:52:13 发布

南风花海

最新推荐文章于 2023-09-12 22:52:13 发布

阅读量941

点赞数 1

分类专栏： javascript 文章标签： canvas

本文链接：https://blog.csdn.net/nanfengzhishui/article/details/120336018

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!--
 * @Author: your name
 * @Date: 2021-09-16 09:13:00
 * @LastEditTime: 2021-09-16 19:37:50
 * @LastEditors: [jsh]
 * @Description: In User Settings Edit
 * @FilePath: \JavaScript\Canvas-day01\8-线性渐变.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-线性渐变</title>
</head>
<body>
    <canvas width="400px" height="400px"></canvas>
    
</body>
<script>
    //文档加载完毕执行代码
    window.onload=function(){
        //1.获取画布
        var canvas =document.querySelector('canvas');
        //2.获取上下文对象  context --获取画笔
        var context = canvas.getContext('2d');
        //3.声明一个线性渐变对象 第一二个参数渐变起点 第三四个参数渐变终点
        var g=context.createLinearGradient(0,0,400,400);//
        //4.填充渐变  取值范围0~1
        g.addColorStop(0,'red');
        g.addColorStop(0.5,'yellow');
        g.addColorStop(1,'cyan');
        //5.填充样式
        context.fillStyle=g;
        //6.绘制渐变矩形
        context.fillRect(0,0,400,400);//fillRect(x,y,width,height)
}
</script>
</html>

南风花海

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
画布(Canvas)实现颜色渐变

<!DOCTYPE html><html lang=".
复制链接

扫一扫