热搜：编程 Python Microsoft 编程语言 C++

html5好代码教程如何实现Photoshop渐变色效果

发布时间：2023-01-02 23:51:58 来源：互联网

.

每到春天，红得如火的木棉花，粉得如霞的芍药花，白得如玉的月季花竞相开放。它们有的花蕾满枝，有的含苞初绽，有的昂首怒放。一阵沁人心肺的花香引来了许许多多的小蜜蜂，嗡嗡嗡地边歌边舞。

复制代码

代码如下:

<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5画线、圆、矩形</title>
<script src="<a rel="nofollow noopener noreferrer" href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用，调用绘图API</p> <p>//指定渐变区块
var grd=draw.createLinearGradient(50,50,200,50); //坐标，长宽
grd.addColorStop(0,"black"); //起点颜色
grd.addColorStop(1,"green"); //终点颜色</p> <p>draw.fillStyle=grd; //设为填充样式
draw.fillRect(50,50,200,50); //填充进矩形内
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>

效果图：

到此这篇关于html5好代码教程如何实现Photoshop渐变色效果就介绍到这了。人生不是一支短短的蜡烛，而是一只由我们暂时拿着的火炬；我们一要把它燃得十分光明灿烂，然后交给下一代的人们。更多相关html5好代码教程如何实现Photoshop渐变色效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： 渐变色