1、线条渐变(线性渐变)
-
createLinearGradient(x,y,x1,y1)-创建线性渐变语法
-
x表示渐变开始的x坐标
-
y表示渐变开始的y坐标
-
x1表示渐变结束的x坐标
-
y1表示渐变结束的y坐标
代码如下:
<!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>Document</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script>
/** @type {HTMLCanvasElement} */
//1.获取画布
var canvas = document.getElementById("canvas");
//2.创建画布上下文
var context = canvas.getContext("2d");
//创建渐变对象
var linear = context.createLinearGradient(100, 50, 50, 50)
//添加渐变颜色
linear.addColorStop(0, "red");
linear.addColorStop(0.5, "green");
//设置矩形的填充颜色
context.fillStyle = linear;
//5.绘制图形
context.fillRect(0, 0, 200, 200);
// context.fillStyle = linear; 我们都是用fillStyle给形状填充颜色的
//但是这里面我们创建了渐变颜色也就是上面的linear所有我们只需要给fillStyle赋值即可
</script>
</html>
效果:(也可以调创建渐变里面的x、y坐标来改变颜色所对应的方向)
2、圆渐变(径向渐变)
-
createRadialGradient(x,y,r,x1,y1,r1)---创建径向渐变
-
x表示渐变开始圆的x坐标
-
y表示渐变开始圆的y坐标
-
r表示开始圆的半径
-
x1表示渐变结束圆的x坐标
-
y1表示渐变结束圆的y坐标
-
r1表示结束圆的半径
代码如下:
<!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>Document</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script>
/** @type {HTMLCanvasElement} */
//1.获取画布
var canvas = document.getElementById("canvas");
//2.创建画布上下文
var context = canvas.getContext("2d");
//创建渐变对象
var linea = context.createRadialGradient(100, 100, 10, 100, 100, 50);
linea.addColorStop(0.5, "red");
linea.addColorStop(1, "green");
context.arc(100, 100, 50, 0, Math.PI * 2)
context.fillStyle = linea;
context.fill()
</script>
</html>
效果:
3、文本的绘制
代码如下:
<!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>Document</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script>
/** @type {HTMLCanvasElement} */
//1.获取画布
var canvas = document.getElementById("canvas");
//2.创建画布上下文
var context = canvas.getContext("2d");
context.font = "20px 宋体";
context.fillStyle = "red"
context.fillText("Hello,World", 30, 50)
</script>
</html>
效果图:
注:fillText(text,x,y):里面的x、y轴要给一定的值我们都知道形状是根据形状的左上角为原点,而文字是以左下角为原点,要是不给值会出不来
没有x、y轴值的效果图:
这个小红点就是文字的左下角