canvas |
您所在的位置：网站首页 › canvas怎么画 › canvas |
canvas
|
「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」 1, 画文字fillText() 在画布上绘制填色的文本， 默认颜色也是黑色 fillText(text, x, y, maxWidth) : 参数说明 text #规定在画布上输出的文本 x # 开始绘制文本的x坐标位置 y # 开始绘制文本的y坐标位置 maxWidth # 可选， 允许的最大文本宽度 复制代码注意：如果要绘制空心文字，需要用strokeText() Canvas绘制文字 canvas { margin: 0 auto; border: 1px solid red; display: block; } 您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果 // 获取canvas标签 var canvas = document.getElementById('canvas') // 获取canvas上下文对象，可理解为：使用画布的权限 var context = canvas.getContext('2d') // 获取画布宽高 var w = context.canvas.width; var h = context.canvas.height; // 设置字体相关样式 context.font = '40px 宋体' // 样色 context.fillStyle = 'red' // 画文字 context.fillText('贰拾壹先生', w/2, w/2) context.strokeStyle = 'blue' // 绘制空心文字 context.strokeText('你好', 100 , 250) // 设置最大宽度 context.fillStyle = 'gold' context.fillText("最大宽度,不管内容多少，左右都100px", 100, 100, 300) 复制代码效果如图： 通过 createLinearGradient设置整个画布都需要渐变 然后通过addColorStop设置渐变颜色 Canvas绘制文字 canvas { margin: 0 auto; border: 1px solid red; display: block; } 您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果 // 获取canvas标签 var canvas = document.getElementById('canvas') // 获取canvas上下文对象，可理解为：使用画布的权限 var context = canvas.getContext('2d') // 获取画布宽高 var w = context.canvas.width; var h = context.canvas.height; // 设置字体相关样式 context.font = '40px 宋体' // 设置线性渐变 var gradient = context.createLinearGradient(0, 0, canvas.width, 0) gradient.addColorStop('0', "yellow") gradient.addColorStop('0', "blue") gradient.addColorStop('1.0', 'red') context.strokeStyle = gradient // 实心文字 context.fillStyle = gradient context.fillText('实心文字',0, 100, 500) // 空心文字 context.strokeText('风和丽日，心情开朗', 0, 300, 500) 复制代码textAlgin 设置或返回文本内容的当前对齐方式 textAlign = end textAlign = start textAlign = left textAlign = center textAlign = right 复制代码textBaseLine 设置或返回咋绘制文本时的当前文本基线 textBaseLine = Top textBaseLine = Bottom textBaseLine = Middle textBaseLine = Alphabetic textBaseLine = Hanging 复制代码演示： 在画布中画两条线，一条横线，一条竖线，演示字体文字 Canvas绘制文字 canvas { margin: 0 auto; border: 1px solid red; display: block; } 您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果 // 获取canvas标签 var canvas = document.getElementById('canvas') // 获取canvas上下文对象，可理解为：使用画布的权限 var context = canvas.getContext('2d') // 获取画布宽高 var w = context.canvas.width; var h = context.canvas.height; // 画直线 context.beginPath() context.moveTo(250, 0) context.lineTo(250, 500) context.stroke() context.closePath() // 画横线 context.beginPath() context.moveTo(0, 250) context.lineTo(500, 250) context.stroke() context.closePath() // 设置字体相关样式 context.font = '20px 宋体' //context.textAlign = 'end'; context.textAlign = 'center' context.textBaseLine = 'middle' // 设置文本位置 context.fillText('这是字体位置', 250, 250) 复制代码效果如图： 项目代码地址和文档中的截图都是同步的，都已经实现， 在canvas文件夹中 [持续更新中] gitee.com/jamiedawn/t… |
【本文地址】
今日新闻 |
推荐新闻 |