小程序：利用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 = wx.getStorageSync('blinkText') || this.data.textthis.setData({text})this.init()},

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

const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = 1 //wx.getSystemInfoSync().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)i = (canvas.width - that.getByteLen(text) * 100) / 2ctx.fillStyle = "#ffffff"ctx.fillRect(0, 0, canvas.width, canvas.height)ctx.font = "bolder 200px Arial"ctx.fillStyle = 'black'ctx.textBaseline = 'top'ctx.fillText(text, 0, 100)// ctx.lineWidth = 5// ctx.strokeText(text, 0, 100)let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data// console.log(imageData)

ctx.fillStyle = "#ffffff"ctx.fillRect(0, 0, canvas.width, canvas.height)

this.data.canvas = canvasthis.data.ctx = ctxthis.data.imageData = imageDataconsole.log(canvas.width, canvas.height)// this.drawText()const renderLoop = () =>{this.drawText()

canvas.requestAnimationFrame(renderLoop)}// canvas.cancelAnimationFrame(renderLoop)canvas.requestAnimationFrame(renderLoop)})},drawText() {var gap = 7,{imageData,canvas,ctx,text,scroll} = this.dataif (scroll) {if (i >= canvas.width) {i = -canvas.width}i += 2}

ctx.clearRect(0, 0, canvas.width, canvas.height)for (var h = 0h <canvas.heighth += gap) {for (var w = 0w <canvas.widthw += gap) {var position = (canvas.width * h + w) * 4var r = imageData[position],g = imageData[position + 1],b = imageData[position + 2]

if (r + g + b == 0) {ctx.fillStyle = this.data.colors[Math.floor(Math.random() * this.data.colors.length)]ctx.fillRect(w + i, h, 5, 5)}}}

},toggleSetting() {this.setData({setting: this.data.setting ? false : true})},setText(e) {

let that = thiswx.cloud.callFunction({name: 'msgSecCheck',data: {op: 'textCheck',content: e.detail.value},success(res) {console.log('ContentCheck-res', res)if (res.result.code == 300) {console.log(res.result.msg)wx.showToast({icon: 'none',title: res.result.msg,})that.setData({'text': ''})} else {that.setData({setting: false,'text': e.detail.value})that.init()}},fail(err) {console.log('ContentCheck-errxxxx', err)

}})

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

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

},

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

},

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

},

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

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

},

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

},

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

}})

package needl

import javax.swing.*

import java.awt.*

import java.awt.event.*

import java.awt.geom.*

import java.util.*

final class FontColor extends JFrame {

    final static private Dimension SIZE = new Dimension(800, 600)

    public String getTitle() {return "FontColor"}

    public Dimension getPreferredSize() {return SIZE}

    public Dimension getMinimumSize() {return SIZE}

    public Dimension getMaximumSize() {return SIZE}

    public Dimension getSize() {return SIZE}

    private Canvas canvas

    private Brush brush

    FontColor() throws HeadlessException {

        init()

        attachListeners()

        doLay()

        setVisible(true)

    }

    private void init() {

        brush = new StringBoundBrush()

        canvas = new Canvas(brush)

    }

    private void attachListeners() {

        addWindowListener(new WindowAdapter() {

            public void windowClosing(WindowEvent e) {

                System.exit(1)

            }

        })

    }

    private void doLay() {

        Container container = getContentPane()

        container.add(canvas, BorderLayout.CENTER)

        pack()

    }

    public static void main(String... args) {

        System.setProperty("swing.defaultlaf", "com.sun.java.swing.plaf.windows.WindowsLookAndFeel")

        SwingUtilities.invokeLater(FontColor::new)

    }

    private interface Brush extends Observer {

        /**

         * do paint action

         * @param g the graphics context in you application

         */

        void paint(Graphics g)

        /**

         * The component that this brush hold

         * @return component instance

         */

        Component getOwner()

        void setOwner(Component owner)

    }

    private static final class StringBoundBrush implements Brush {

        private Component owner

        private final static AffineTransform AFFINE_TRANSFORM = AffineTransform.getRotateInstance(45f/180f*Math.PI)

        private final static String CHAR="你好啊！"

        public StringBoundBrush() {

            AFFINE_TRANSFORM.preConcatenate(AffineTransform.getTranslateInstance(100, 100))

        }

        public Component getOwner() {

            return owner

        }

        public void setOwner(Component owner) {

            this.owner = owner

        }

        public void paint(Graphics g) {

            Graphics2D g2 = (Graphics2D)g.create()

            g2.setTransform(AFFINE_TRANSFORM)

            g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON)

            g2.setColor(Color.PINK)

            g2.setFont(g2.getFont().deriveFont(34f))

            g2.fill( g2.getFontMetrics().getStringBounds(CHAR,g2) )

            g2.setColor(Color.BLUE)

            g2.drawString(CHAR,0,0)

            g2.dispose()

        }

        public void update(Observable o, Object arg) {

            if (owner != null) owner.repaint()

        }

    }

    /**

     * you canvas

     */

    private class Canvas extends JComponent {

        private Brush brush

        private Canvas(Brush brush) {

            super()

            this.brush = brush

            brush.setOwner(this)

        }

        protected void paintComponent(Graphics g) {

            super.paintComponent(g)

            if (brush == null) return

            brush.paint(g)

        }

    }

}

---