HTML5 Canvas绘制渐变（一）

最新推荐文章于 2024-09-02 07:00:00 发布

Lemon萌

最新推荐文章于 2024-09-02 07:00:00 发布

阅读量504

点赞数

分类专栏： Html5案例文章标签： html5

本文链接：https://blog.csdn.net/taowanyy/article/details/7659713

版权

Html5案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>绘制渐变</title>
</head>

<body>
<canvas></canvas>
<script>

//绘制渐变和模式(线性渐变)
var canvas = document.querySelector('canvas'),
	ctx = canvas.getContext('2d');
gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#f00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.width);
</script>
</body>
</html>

参数是渐变的起始点：X1和Y1，以及渐变的结束点：X2和Y2。在这个例子中，我们告诉渐变从左上方开始，在画布的右下方结束。于是创建了一个线性渐变

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lemon萌

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas绘制渐变（一）

绘制渐变//绘制渐变和模式(线性渐变)var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d');gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);gradient.addColorStop(0, '#fff');
复制链接

扫一扫