认识Canvas(二)

绘制文本

  1. strokeText(“文本内容”,x轴,y轴)
  2. fillText(“文本内容”,x轴,y轴)
  3. font属性:设置文本的格式:比如:font=”30px Microsoft Yahei”;
  4. textAlign:文本的水平对齐方式(默认值是 start)

    1. left 文本左对齐(文字的最左边靠着起点x轴所在)
    2. right 文本右对齐
    3. center 文本居中对齐
      1. 想要让文字在画布中水平居中,只需要设置文字的起点位置x轴的值为画布的总宽度的一半,同时这是文字水平居中:textAlign=”center”
    4. start相当于left
    5. end:相当于right
  5. textBaseLine:文字垂直对齐方式(默认值是 alphabetic)

    1. top:文本基线在文本块的顶部。
    2. hanging:文本基线是悬挂基线。
    3. middle:文本基线在文本块的中间。(文字垂直居中)
    4. alphabetic:文本基线是标准的字母基线(英语四线格的第三条线)
    5. bottom:文本基线在文本块的底部。

了解这些属性后,来看下代码吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//绘制一个在画布的正中央,字体:微软雅黑,36px 红色的实心文字:"还蛮好玩的"
//参考点坐标:400,300
var x=canvas.width/2;
var y=canvas.height/2;
//绘制参考线:
ctx.moveTo(0,y);
ctx.lineTo(canvas.width,y);
ctx.stroke();
ctx.moveTo(x,0);
ctx.lineTo(x,canvas.height);
ctx.stroke();
ctx.font="36px Microsoft Yahei";
ctx.fillStyle="red";
//让文字基于参考点:垂直居中
ctx.textBaseline="middle";
//让文字基于参考点:水平居中
ctx.textAlign="center";
ctx.fillText("还蛮好玩的",x,y);
</script>
</html>

绘制矩形

  1. strokeRect(x,y,width,height) ——>rect+stroke
  2. fillRect(x,y,width,height) ——>rect+fill
  3. rect(x,y,width,height)
  4. clearRect(x,y,width,height)
    1. 清空整个画布:ctx.clearRect(0,0,canvas.width,canvas.height)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50,50,300,300);
//clearRect:擦除画布中指定的矩形区域
//绘制出一个环形:
//ctx.clearRect(100,100,200,200);
ctx.clearRect(100,100,50,50);
ctx.clearRect(200,100,50,50);
ctx.clearRect(100,200,150,30);
//擦除整个画布:
ctx.clearRect(0,0,canvas.width,canvas.height);
</script>
</html>

绘制圆弧和动画

  1. arc(圆心x,圆心y,半径,开始弧度,结束弧度)
  2. 整个圆是2*Math.PI的,0的位置位于圆心水平往右拉直线,Math.PI/2就位于圆心的正下方
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var startRadius=-Math.PI/2;
var endRadius=startRadius+0.1*Math.PI;
ctx.strokeStyle="black";
//ctx.lineWidth=300;
var timer=setInterval(function(){
if(endRadius>=(startRadius+2*Math.PI)){
clearInterval(timer);
}
//清空整个画布:
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.moveTo(400,150);
ctx.arc(400,300,150,startRadius,endRadius);
ctx.stroke();//4.3 4.7(1.5个)
endRadius+=0.01*Math.PI;
console.log(endRadius);//4.7 5
},20);
</script>
</html>

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 绘制文本
  2. 2. 绘制矩形
  3. 3. 绘制圆弧和动画