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