canvas画小球，头像，文本

深碍√TFBOYSˉ_ 2021-12-16 21:25 312阅读 0赞

/**
         * 画小球
         */
        drawArc: function(ctx, color, w, h) {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.arc(w, h, 4, 0, 2 * Math.PI, false);
            ctx.fill();
        },
        /**
         * 画头像
         */
        drawAvatar: function(ctx, url, w, h, radius) {
            ctx.beginPath(); //开始绘制
            ctx.arc(w + radius, h + radius, radius, 0, 2 * Math.PI, false);
            ctx.clip();
            ctx.drawImage(url, w, h, radius * 2, radius * 2);
            ctx.restore();
        },
         /**
         * 文本
         */
        drawText: function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
            var lineWidth = 0;
            var lastSubStrIndex = 0; //每次开始截取的字符串的索引 
            for (let i = 0; i < str.length; i++) {
                lineWidth += ctx.measureText(str[i]).width;
                if (lineWidth > canvasWidth) {
                    ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分                
                    initHeight += 25; //16为字体的高度                
                    lineWidth = 0;
                    lastSubStrIndex = i;
                    titleHeight += 30;
                }
                if (i == str.length - 1) { //绘制剩余部分                
                    ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
                }
            } // 标题border-bottom 线距顶部距离        
            titleHeight = titleHeight + 10;
            return titleHeight
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas重力小球 html+css+js

先看效果（完整代码在底部）：因为录屏软件的原因，动画看着有点迟钝，其实是动画很顺畅的~ https://space.bilibili.com/176586698

墨蓝/ 2022年11月17日 14:52/ 0 赞/ 232 阅读

相关 JavaScript canvas实现跟随鼠标移动小球

本文实例为大家分享了js跟随鼠标移动小球的具体代码，供大家参考，具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12

冷不防/ 2022年10月29日 07:51/ 0 赞/ 260 阅读

相关 canvas绘制七彩随机小球！

canvas绘制七彩随机小球 1、题目 > 拿到一个案例，需要在画布上实现不同大小颜色位置的七彩小球，并且要运动起来！ 2、思路 > （1）、第一步需要在页

柔光的暖阳◎/ 2022年10月15日 04:00/ 0 赞/ 277 阅读

相关 canvas标签实现动态小球

Html5 canvas标签实现动态小球话不多说，直接上代码 <canvas id="mycanvas" width="500" height="500" st

曾经终败给现在/ 2022年07月14日 05:50/ 0 赞/ 281 阅读

相关 HTML5之canvas彩色动感小球

一：代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

╰+哭是因爲堅強的太久メ/ 2022年05月13日 05:24/ 0 赞/ 304 阅读

相关 canvas绘制圆角头像

如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下：首先，拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍)

不念不忘少年蓝@/ 2022年03月25日 03:00/ 0 赞/ 353 阅读

相关 canvas小球运动的例子

这是慕课网用canvas写的一个比较简单的2d小球运动的例子 <!DOCTYPE html> <html lang="en"> <head>

小灰灰/ 2022年03月17日 05:08/ 0 赞/ 326 阅读

相关 canvas画小球，头像，文本

/ 画小球 / drawArc: function(ctx, color, w, h) {

深碍√TFBOYSˉ_/ 2021年12月16日 21:25/ 0 赞/ 313 阅读

相关小程序canvas画虚线圆

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

约定不等于承诺〃/ 2021年12月11日 13:13/ 0 赞/ 490 阅读

相关绘制canvas彩色泡泡小球碰撞

globalCompositeOperation带来的不一样的烟花 ![20170224163016894][] 一.知识点 1.动画： setInterval(

墨蓝/ 2021年09月11日 07:54/ 0 赞/ 493 阅读