19-canvas绘制文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-Canvas绘制文字</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
margin: 0 auto;
background: red;
}
</style>
</head>
<body>
<canvas width="800" height="400"></canvas>
<script>
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 3.绘制参考线
let canvasWidth = oCtx.canvas.width;
let canvasHeight = oCtx.canvas.height;
oCtx.moveTo(0, canvasHeight/2);
oCtx.lineTo(canvasWidth, canvasHeight/2);
oCtx.stroke();
oCtx.moveTo(canvasWidth/2, 0);
oCtx.lineTo(canvasWidth/2, canvasHeight);
oCtx.stroke();
// 4.绘制文字
let str = "小白兔真可爱两只耳朵竖起来";
// 通过font属性可以设置文字的大小和样式
oCtx.font = "50px 微软雅黑";
// 通过textBaseline属性可以设置文字垂直方向的对齐方式
// 注意点: 在对齐的时候是以绘制文字的y作为参考点进行对齐的
oCtx.textBaseline = "middle";
// 通过textAlign属性可以设置文字水平方向的对齐方式
// 注意点: 在对齐的时候是以绘制文字的x作为参考点进行对齐的
oCtx.textAlign = "center";
/*
注意点:
在绘制文字的时候, 是以文字的左下角作为参考点进行绘制
* */
//不填充文字
// oCtx.strokeText(str, canvasWidth/2, canvasHeight/2);
//填充文字
// oCtx.fillText(str, canvasWidth/2, canvasHeight/2);
</script>
</body>
</html> 相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25