<!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>画文字</title>
</head>
<body>
<canvas id="can" width="500px" height="500px" style="border: 1px solid #999;"></canvas>
<script>
var c = document.querySelector('#can');
var ctx = c.getContext('2d');
// 设置字体相关的样式 样式要写在设置文字前面
// 文字大小 字体
ctx.font="100px 微软雅黑";
// 设置实心文字颜色
ctx.fillStyle = "#f00";
// 设置实心文字 文字 x y 文字最大宽度
ctx.fillText('你好',150,150,300);
// 设置空心文字颜色
ctx.strokeStyle = "#f00";
// 设置空心文字 文字 x y 文字最大宽度
ctx.strokeText('你好',250,250,300);
// 设置空心文字颜色
ctx.strokeStyle = "blue";
// 设置空心文字 文字 x y 文字最大宽度
ctx.strokeText('hello world ni hao ma',80,450,400);
</script>
</body>
</html>
canvas 画文字
最新推荐文章于 2022-11-23 16:03:55 发布