canvas文字自动换行、圆角矩形画法、生成图片手机长按保存

canvas的文字自动换行函数封装

//            str:要绘制的字符串
//            canvas:canvas对象
//            initX:绘制字符串起始x坐标
//            initY:绘制字符串起始y坐标
//            lineHeight:字行高,自己定义个值即可
            function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
                var ctx = canvas.getContext("2d");
                var lineWidth = 0;
                var canvasWidth = canvas.width;
                var lastSubStrIndex= 0;
                for(let i=0;i<str.length;i++){
                    lineWidth+=ctx.measureText(str[i]).width;
                    //减去initX,防止边界出现的问题
                    if(lineWidth>canvasWidth-initX*2.3){
                        ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
                        initY+=lineHeight;
                        lineWidth=0;
                        lastSubStrIndex=i;
                    }
                    if(i==str.length-1){
                        ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
                    }
                }
          }

vanvas画圆角矩形的函数封装

// 封装的一个用于绘制圆角矩形的函数.
            function roundedRect(x,y,width,height,radius,color,type){
              var ctx=this.ctx;
              ctx.beginPath();
              ctx.moveTo(x,y+radius);
              ctx.lineTo(x,y+height-radius);
              ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
              ctx.lineTo(x+width-radius,y+height);
              ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
              ctx.lineTo(x+width,y+radius);
              ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
              ctx.lineTo(x+radius,y);
              ctx.quadraticCurveTo(x,y,x,y+radius);
              ctx[type+‘Style‘] = color;
              ctx.closePath();
              ctx[type]();
            }

直接在html中用canvas画好的图,在手机端是不能实现直接长按保存到相册的。这里给出一种方法是:把canvas画好的图变成链接,引入img中,canvas隐藏,这样实现了canvas画图手机长按保存的效果。在这里,记录一个过程中遇到的问题,直接用设计稿的尺寸来定义画布大小,如果尺寸太大的话,手机上打开(只是说canvas画好的图未经过任何处理)会出现放不开的情况,只有手动缩放才能正常显示。遇到这个问题,尝试过canvas的缩放,不好使,最后也是通过上面的方法来解决的。

canvas导出位图片

var canvas = document.getElementById(‘mycanvas‘);
var urlimg=canvas.toDataURL(‘image/png‘, 0.92);
document.getElementById("test").src = urlimg;

原文地址:https://www.cnblogs.com/wanan-01/p/9479577.html

时间: 2024-10-12 12:54:32

canvas文字自动换行、圆角矩形画法、生成图片手机长按保存的相关文章

详述Canvas(五)/绘制圆角矩形

Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现. 我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处,然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述).此处我们将终点设为(x+w,y+h);这就是第一段曲线.第一段曲线绘制完毕之后,画笔落在了下图绿色点的位置. 现在再看下第二段曲线: 因此我们

微信小程序 canvas 文字自动换行

Page({ drawCanvas: function(ctx) {// 地址 ctx.setFontSize(14) ctx.setFillStyle('#9E7240') ctx.textAlign="center"; const txHash = this.data.info.txHash ? this.data.info.txHash : '暂无信息' this.drawText(ctx,txHash,187, 517 , 232,232) // 自动换行 ctx.draw()

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,

(转)Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

来自:http://blog.csdn.net/rhljiayou/article/details/7212620 1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writi

canvas.drawRoundRect方法,绘制圆角矩形

public void drawRoundRect (RectF rect, float rx, float ry, Paint paint) Draw the specified round-rect using the specified paint. The roundrect will be filled or framed based on the Style in the paint. Parameters rect The rectangular bounds of the rou

[转]html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成.而本文讲的圆角矩形则只有通过其他方法模拟出来. 一个正常的圆角矩形,我们先假设他四个角的圆角弧度一致——因为这样比较好画.我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成. 提到钩子,如果你看过我介绍arcTo的文章,那么可能你一下就明白了这种图形就可以用arcTo画出来. 我讲arcTo的时候提过,arcTo有个特性就是,他的第2条切线延长也并不会对他画出的线条造成影响(在上文的最后部分

canvas转图片中的文字自动换行

概述 最近项目用到了canvas转图片,但是由于canvas对文字排版的支持非常弱,一般我们在canvas上画不同排版的文字(比如竖排文字)都是利用js计算横纵坐标,然后一个字一个字地画出来,今天无意中看到一个使用svg的方法,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料: SVG 简介与截图等应用 svg和canvas介绍 svg和canvas都支持图形渲染,它们各有侧重: svg:更适用于高保真文档,静态图像,可交互图表图形,2D游戏等. canvas:更适用于屏幕截图,视频操

Canvas入门04-绘制矩形

使用的API: ctx.strokeRect(x, y, width, height) 给一个矩形描边 ctx.fillRect(x, y, width, height) 填充一个矩形 ctx.clearRect(x, y, width, height) 清除矩形区域 ctx.lineJoin = 'round' | 'bevel' | 'miter'  定义线交点处的样式 var canvas = document.getElementById('canvas'), context = can

Android圆角矩形创建工具RoundRect类

用于把普通图片转换为圆角图像的工具类RoundRect类(复制即可使用): import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.