您的位置：首页 > 百科管理 > 详情

canvas制作海报怎么添加文字-如何用HTML5 CANVAS绘制文字

原创：找图网 2023-05-04 03:44:54

怎么在Canvas中输入文本

canvas 中可以用 fillText() 绘出文字。

例如:

Your browser does not support the HTML5 canvas tag.</canvas>

var c = ("myCanvas");

var ctx = c.getContext("2d");

= "20px Georgia";

("Hello World!", 10, 50);

= "30px Verdana";

var gradient = (0, 0, c.width, 0);

("0", "magenta");

("0.5", "blue");

("1.0", "red");

= gradient;

("Big smile!", 10, 90);

</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet

Explorer 8 and earlier versions.</p>

</body>

</html>

====

如果想插入显示一个文件或网页,可以用 <iframe>, 而不是用画布<canvas>,

例如:

小程序：利用canvas制作文字特效

先上一图,这个是最终效果:

再看看闪耀效果:

1、先将文字画在canvas;

2、利用getImageData()获取图像数据;

3、将图像数据中黑色(你可以用其他颜色)按一定间隔取值(获取坐标);

4、在获取的坐标画矩形(你画其他形状也是可以的);

5、使用requestAnimationFrame,变换矩形颜色。

这样就闪烁起来了~~

var i = 0

Page({

/*** 页面的初始数据*/data: {hideNav: false,colors: ["#fff", "#FF6E40", "#FFAB40", "#FFFF00", "#EEFF41", "#B2FF59", "#69F0AE", "#64FFDA", "#18FFFF", "#40C4FF", "#E040FB", "#FF4081", "#ff5252"],

text: '肖战',scroll: false,setting: false},

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = this, text = ('blinkText') || ;({text})()},

init() {().select('#canvas').fields({node: true,size: true,}).exec((res) => {let that = this,text = width = res[0].widthconst height = res[0].height

const canvas = res[0].nodeconst ctx = ('2d')const dpr = 1 //(). = width * = height * (dpr, dpr)i = ( - (text) * 100) / = "#ffffff";(0, 0, , ); = "bolder 200px Arial"; = 'black'; = 'top';(text, 0, 100);// = 5;// (text, 0, 100);let imageData = (0, 0, , ).data;// (imageData)

= "#ffffff";(0, 0, , );

= = = (, )// ()const renderLoop = () => {()

(renderLoop)}// (renderLoop)(renderLoop)})},drawText() {var gap = 7,{imageData,canvas,ctx,text,scroll} = (scroll) {if (i >= ) {i = -}i += 2}

(0, 0, , )for (var h = 0; h < ; h += gap) {for (var w = 0; w < ; w += gap) {var position = ( * h + w) * 4;var r = imageData[position],g = imageData[position + 1],b = imageData[position + 2];

if (r + g + b == 0) { = [(() * )];(w + i, h, 5, 5);}}}

},toggleSetting() {({setting: ? false : true})},setText(e) {

let that = ({name: 'msgSecCheck',data: {op: 'textCheck',content: e.},success(res) {('ContentCheck-res', res)if ( == 300) {()({icon: 'none',title: ,})({'text': ''})} else {({setting: false,'text': e.})()}},fail(err) {('ContentCheck-errxxxx', err)

}})

},getByteLen(str) {var len = 0;for (var i = 0; i < ; i++) {var length = (i);if (length >= 0 && length <= 128) {len += 1;} else {len += 2;}}('文字长度',len)return len;},donothing() {

},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {

/*** 生命周期函数--监听页面显示*/onShow: function () {

/*** 生命周期函数--监听页面隐藏*/onHide: function () {

/*** 生命周期函数--监听页面卸载*/onUnload: function () {({data: ,key: 'blinkText',})},

/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {

/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {

/*** 用户点击右上角分享*/onShareAppMessage: function () {

}})