canvas——1

45 阅读1分钟
const canvas = document.getElementById('canvas');
// 绘图环境
const context = canvas.getContext('2d');
// 字体,等同于css中的font属性
context.font = '36px Arial,"Microsoft YaHei",sans-serif';
// 填充样式, 可传color字符串或CanvasGradient对象(渐变色)或CanvasPattern对象(图案)
context.fillStyle = '#00f';
// 描边样式, 参数和fillStyle一致
context.strokeStyle = '#0ff';
// 填充文本, 参数:(text, x, y, [maxWidth]), 当文本宽度大于最大宽度时, 会自动缩小文本至最大宽度
context.fillText('你好, Canvas', canvas.width / 2 - 108, canvas.height / 2 + 18);
// 描边文本, 参数和fillText一致
context.strokeText('你好, Canvas', canvas.width / 2 - 108, canvas.height / 2 + 18);