关于h5绘制canvas生成图片的注意点！

1、第一个是关于移动端自适应的问题：

答：如果是最后只要一张canvas生成的图片，而不是要绘制的canvas的图形，则不需要考虑自适应，绘制canvas的时候的宽高，可以直接写成UI提供的图的大小，比如UI提供的图是 750 * 1280 ,则绘制canvas的时候，所有的数据都可以

以375*640来进行计算，固定好即可！这个跟后台绘制图片的原理一样，我们不需要考虑自适应，ui给什么图，或者说我们希望要多大的图片，我们直接绘制即可，因为图片最后自己可以按比例伸缩，默认即是自适应！

2、关于H5绘制canvas的多行文本，我们可以利用测量宽度进行自动换行绘制文字！

3、绘制图片完成后再绘制文字，即可解决文字在图片底部的问题！

具体代码如下：

/*** 绘制canvas*/
function draw(name='大威德', score = 23, level = 1, str = '哈哈哈哈') {var c = document.getElementById("canvas");var ctx = c.getContext("2d");// 绘制背景var img = new Image();img.src = "images/newbg.jpg";img.onload = function () {ctx.drawImage(img, 0, 0,375,640);// 绘制底部文字ctx.font = "bold normal 20px Microsoft YaHei";ctx.fillStyle = "black";ctx.fillText(name, 375 * 0.18, 640 * 0.34);ctx.font = "bold normal 20px Microsoft YaHei";ctx.fillStyle = "red";ctx.fillText(score, 375 * 0.63, 640 * 0.345);ctx.fillStyle = "black";ctx.fillText(level, 375 * 0.37, 640 * 0.458);ctx.font = "normal 18px Microsoft YaHei";ctx.fillStyle = "black";// 绘制多行文字canvasTextAutoLine(str, c, 375 * 0.1, 640 * 0.5, 20);

var imgsrc = c.toDataURL("image/png",1);

　　　注意：这一行就是把canvas绘制的图形变成图片，imgsrc为base64格式！

    };}
/*
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 = document.documentElement.clientWidth;var lastSubStrIndex = 0;for (let i = 0; i < str.length; i++) {lineWidth += ctx.measureText(str[i]).width;if (lineWidth > canvasWidth * 0.8) {//减去initX,防止边界出现的问题
            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);}}
}

转载于:https://www.cnblogs.com/teamemory/p/9767030.html

关于h5绘制canvas生成图片的注意点！相关推荐

H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
php绘制频谱图,H5的Canvas如何实现绘制音乐环形频谱图
这次给大家带来H5的Canvas如何实现绘制音乐环形频谱图,H5Canvas实现绘制音乐环形频谱图的注意事项有哪些,下面就是实战案例,一起来看一下. 在B站我们有很多的小伙伴们应该都看到过用AE做的可 ...
关于H5页面中生成图片的两种方式！
前言: 我们在做项目过程中,经常会遇到自定义生成一张图片并可以长按保存.长按保存图片在微信等浏览器中默认就有,那么对于生成图片的有哪些方式呢? 方法一: 利用canvas绘制图形,然后生成图片代码如 ...
H5使用Canvas模板设计签名并将图片保存到本地
最近在工作中遇到一个需求,自定义签名并将签名返回到页面上,为了方便以后遇到这种请求不在到处找资料,所以就想把这个需求记录下来 h5的Canvas自定义模板页面代码:canvas前端代码: <d ...
用h5的canvas实现动画的泡沫
效果图一代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
最简单太阳系H5动画canvas详解零基础可入
最简单太阳系H5动画canvas详解零基础可入最终结果:(实际为动画效果,金星绕轨道转动) 页面准备/html 要使用canvas,需要首先在页面中要绘制的位置放入canvas标签元素,在后期的绘 ...
h5动画 php,用H5的canvas做恐怖动画
这次给大家带来用H5的canvas做恐怖动画,用H5的canvas做恐怖动画的注意事项有哪些,下面就是实战案例,一起来看一下. canvas可以实现一些有趣的效果,动画实现.以一个简单的页面实现了解一 ...
canvas生成图片上传服务器，网络图片生成图片文件
vue+canvas 生成签名图片并保存数据库 VUE+ElementUI 最近根据项目需求在用户生成订单的时候需要附上自己的签名照片,因为考虑到不能上传图片所以使用canvas画图功能. 而目前后 ...

关于h5绘制canvas生成图片的注意点！

关于h5绘制canvas生成图片的注意点！相关推荐

最新文章

热门文章