笔记十六（绘制六——线性渐变色）

最新推荐文章于 2023-01-07 17:04:16 发布

草木黄尘

最新推荐文章于 2023-01-07 17:04:16 发布

阅读量655

点赞数

分类专栏：前端动画基础学习笔记文章标签：绘图

本文链接：https://blog.csdn.net/qq_24849765/article/details/50199487

版权

前端动画基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文件名：drawing6.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>绘制6</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext("2d");
            pt1 = {x:100,y:100},
            pt2 = {x:300,y:300},
            gradient = context.createLinearGradient(pt1.x , pt1.y , pt2.x , pt2.y);
        gradient.addColorStop(0,"#f00");
        gradient.addColorStop(0.5,"#ff0");
        gradient.addColorStop(1,"rgba(255,0,0,0)");
        context.fillStyle = gradient;
        context.fillRect(100,100,200,200);//绘制矩形（起点坐标和长宽）
    }
</script>
</body>
</html>

效果图：
渐变图效果

参见《HTML5+Javascript动画基础》。

草木黄尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记十六（绘制六——线性渐变色）

文件名：drawing6.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>绘制6</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id="canvas" width="400" h
复制链接

扫一扫

专栏目录