canvas中的渐变
程序员文章站
2022-06-25 08:42:49
线性渐变 canvas
线性渐变
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
.canvas{border:1px solid pink;}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getelementbyid("canvas");
var ctx=canvas.getcontext("2d");//上下文，绘图环境
//0,0 第一个点 300,300 第二个点
var myligra=ctx.createlineargradient(0,0,300,300);
//上述线条的0%位置为pink
myligra.addcolorstop(0,"pink");
//上述线条的100%位置为pink
myligra.addcolorstop(1,"purple");
//将该渐变设置为填充样式
ctx.fillstyle=myligra;
//绘制矩形
ctx.fillrect(0,0,300,300);
</script>
</body>
</html>
给圆填充好看的线性渐变
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
.canvas{border:1px solid pink;}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getelementbyid("canvas");
var ctx=canvas.getcontext("2d");//上下文，绘图环境
//0,0 第一个点 300,300 第二个点
var myligra=ctx.createlineargradient(0,0,300,300);
//给渐变分配颜色
myligra.addcolorstop(0,"rgb(255,175,74)");
myligra.addcolorstop(.5,"rgb(255,191,196)");
myligra.addcolorstop(1,"rgb(173,216,230)");
//将该渐变设置为填充样式
ctx.fillstyle=myligra;
//绘制矩形
ctx.arc(150,150,150,0,2*math.pi,true);
ctx.fill();
</script>
</body>
</html>
改变线性渐变的角度，可以通过改变两个点的坐标来完成
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
.canvas{border:1px solid pink;}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getelementbyid("canvas");
var ctx=canvas.getcontext("2d");//上下文，绘图环境
//0,0 第一个点 300,300 第二个点
var myligra=ctx.createlineargradient(150,0,150,300);
//上述线条的0%位置为pink
myligra.addcolorstop(0,"pink");
//上述线条的100%位置为pink
myligra.addcolorstop(1,"purple");
//将该渐变设置为填充样式
ctx.fillstyle=myligra;
//绘制矩形
ctx.fillrect(0,0,300,300);
</script>
</body>
</html>
径向渐变
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
.canvas{border:1px solid pink;}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getelementbyid("canvas");
var ctx=canvas.getcontext("2d");//上下文，绘图环境
//150,150,0 第一个圆的圆心和半径
//150,150,150 第二个圆的圆心和半径
var myligra=ctx.createradialgradient(150,150,0,150,150,150);
//给渐变分配颜色
myligra.addcolorstop(1,"pink");
myligra.addcolorstop(0,"purple");
//将该渐变设置为填充样式
ctx.fillstyle=myligra;
//绘制矩形
ctx.arc(150,150,150,0,2*math.pi,true);
ctx.fill();
</script>
</body>
</html>
径向渐变的角度调整
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
.canvas{border:1px solid pink;}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getelementbyid("canvas");
var ctx=canvas.getcontext("2d");//上下文，绘图环境
//150,150,0 第一个圆的圆心和半径
//150,150,150 第二个圆的圆心和半径
var myligra=ctx.createradialgradient(150,30,0,150,150,150);
//给渐变分配颜色
myligra.addcolorstop(1,"pink");
myligra.addcolorstop(0,"purple");
//将该渐变设置为填充样式
ctx.fillstyle=myligra;
//绘制矩形
ctx.arc(150,150,150,0,2*math.pi,true);
ctx.fill();
</script>
</body>
</html>
上一篇： canvas中文字和图片的绘制