关于Canvas写字

首先明确canvas是有一个font属性的。利用这个属性我们可以将输入的文字画到画布或者说是已有上。先进行最基本的：画布上写字。

如下：

具体的font属性可参考 >

先上一图，这个是最终效果：

再看看闪耀效果：

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 = wxgetStorageSync('blinkText') || thisdatatext;thissetData({text})thisinit()},

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

const canvas = res[0]nodeconst ctx = canvasgetContext('2d')const dpr = 1 //wxgetSystemInfoSync()pixelRatiocanvaswidth = width dprcanvasheight = height dprctxscale(dpr, dpr)i = (canvaswidth - thatgetByteLen(text) 100) / 2ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);ctxfont = "bolder 200px Arial";ctxfillStyle = 'black';ctxtextBaseline = 'top';ctxfillText(text, 0, 100);// ctxlineWidth = 5;// ctxstrokeText(text, 0, 100);let imageData = ctxgetImageData(0, 0, canvaswidth, canvasheight)data;// consolelog(imageData)

ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);

thisdatacanvas = canvasthisdatactx = ctxthisdataimageData = imageDataconsolelog(canvaswidth, canvasheight)// thisdrawText()const renderLoop = () => {thisdrawText()

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

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

if (r + g + b == 0) {ctxfillStyle = thisdatacolors[Mathfloor(Mathrandom() thisdatacolorslength)];ctxfillRect(w + i, h, 5, 5);}}}

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

let that = thiswxcloudcallFunction({name: 'msgSecCheck',data: {op: 'textCheck',content: edetailvalue},success(res) {consolelog('ContentCheck-res', res)if (resresultcode == 300) {consolelog(resresultmsg)wxshowToast({icon: 'none',title: resresultmsg,})thatsetData({'text': ''})} else {thatsetData({setting: false,'text': edetailvalue})thatinit()}},fail(err) {consolelog('ContentCheck-errxxxx', err)

}})

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

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

},

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

},

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

},

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

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

},

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

},

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

}})

Canvas相当于画布，字体的大小格式在Paint上设置才正确， Paint 相当于画笔。代码如下，没有具体参数：希望能帮到你 Paint paint = new Paint(); paintsetTextSize(textSize);//设置字体大小 paintsetTypeface(typeface);//设置字体类型

使用 canvas 绘制文本，重要的属性和方法如下：

示例：

有更多的属性可以让你改变canvas显示文本的方式：

（1）font 字体样式

（2）textAlign文本的对齐方式

语法：ctxtextAlign = "left" || "right" || "center" || "start" || "end";

注意： 该对齐是基于CanvasRenderingContext2DfillText方法的x的值。

有效值：

（3）textBaseline 文本基线，决定文字垂直方向的对齐方式。

有效值:

（4）direction 当前文本方向(此功能某些浏览器尚在开发中)

有效值：

其它文章请访问：

参考： 路径-CanvasAPI|MDN

在wxml中添加<canvas></canvas>组件。注意，这里必须要给id属性，style属性中必须有width和height。关于width和height的值，有个技巧就是width为100%，height为window高度。

获取window的高度，宽度，和像素比例。

写画图方法。新建canvas的上下文环境context，通过画window大小的矩形来设置背景色为#ffffff，将插入到canvas中（注意left，top，width，height等参数），将文本插入到canvas中。最后调用wxdrawCanvas()来将图形和文字绘制出来。

在onReady中准备好（因为后期需要长按保存，所以需要使用>

生成，在真机（注意一定要在真机上测试，因为经常会出现开发工具中是好的，但是真机不能画出来的问题，一定要注意！）上测试也通过，OK啦。（这里不贴手机上的截图了）。

以上就是关于关于Canvas写字全部的内容，包括:关于Canvas写字、canvas设置文字是120px+那它的长度是多少、小程序：利用canvas制作文字特效等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！