纯前端canvas手绘海报

蔚落 2022-11-11 05:50 174阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4Mzg3_size_16_color_FFFFFF_t_70]

源码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" name="viewport">
    
    <meta name="referrer" content="no-referrer">
    <title>分享赚钱</title>
    	.poster-wrap img {
    		width: 100%;
    	}
    </style>
    </head>
    <body>
    
    <div class="" style="background: #ffbb53;">
    	<div class="poster-wrap" style="width:100%;">
    		
    		<img src="img/img-hb.png" class="hb-img" style="width: 100%;position: absolute;z-index: -1;">
    		
    		<canvas id="posterWrap" style="width: 100%;height: 675px;"></canvas>
    	</div>
    	<div class="">
    		<div class="option-wrap">
    			<a class="item _savePoster" href="javascript:;">
    				<span class="icon download"></span>
    				<span class="title">点击生成<br>分享海报</span>
    			</a>
    			<a class="item _shareTimeLine" href="javascript:;">
    				<span class="icon moments"></span>
    				<span class="title">点击右上角<br>分享到朋友圈</span>
    			</a>
    		</div>
    	</div>
    </div>
    
    <script src="../../static/js/jquery.js"></script>
    <script src="../../static/js/layer_mobile/layer.js"></script>
    <script> $(function(){ //接口获取数据 function getCode(){ $.get(_api + '/user/getCode', function(result){ //海报背景 var img_big = 'img/img-hb.png'; //解决ios 图片不显示问题 链接后追加?x-oss-process=image/format,jpg var img_code = result.data.path+'?x-oss-process=image/format,jpg'; //获取海报图片高度 var hb_height = $('.hb-img').height() //将获取海报图片高度hb_height，动态赋值给canvas的高度，保证图片完整展示 $('#posterWrap').height(hb_height) //开始绘制canvas var poster = document.getElementById("posterWrap"); var cxt = poster.getContext("2d"); //做移动端不同dpr适配，解决Canvas在移动端绘制模糊的问题 let dpr = window.devicePixelRatio; // 获取css的宽高 let { width: cssWidth, height: cssHeight } = poster.getBoundingClientRect(); // 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等 poster.width = dpr * cssWidth; poster.height = dpr * cssHeight; // 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小 // 所以需要将绘制比例放大 cxt.scale(dpr,dpr); //此处宽高为css中的width和height属性 与 canvas的width和height属性 的 //不同之处参考https://segmentfault.com/a/1190000019007037 //定义变量方便后面调用 var w = document.body.clientWidth;//可见区域宽，动态适配不同分辨率 console.log(w) var h = hb_height;//海报高度，此处海报过长使用的是图片本身的高度 //如果只做一屏展示的海报可以用 //var h = document.body.clientHeight; console.log(h) // 底部背景色 cxt.fillStyle="#ffbb53"; cxt.fillRect(0, 0 ,w ,h ); // 海报图 var imgbig = new Image; imgbig.src = img_big; imgbig.onload = function () { cxt.drawImage(imgbig, 0,0,w ,h ); // 二维码 var imgcode = new Image; imgcode.src = img_code; imgcode.onload = function () { //canvas中 图形水平居中 //参考：https://blog.csdn.net/wzy890312/article/details/8722538 //公式: (外层图形宽度-需要居中图形宽度)/2 cxt.drawImage(imgcode, (w-160)/2 ,h-230 ,160 ,160 ); } } //点击按钮生成海报 $("._savePoster").click(function() { //添加延时器，避免ios渲染失败问题 setTimeout(function() { var img = convertCanvasToImage(poster); $('.poster-wrap').html(img); //提示弹框 layer.open({ content:'海报已生成，长按海报保存到本地', skin:'msg', time: 2}); console.log(img); } ,1000) }) //canvas生成base64图片 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } }); }; getCode(); }); </script>
    </body>
    </html>

第二张海报，部分功能做一下记录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4Mzg3_size_16_color_FFFFFF_t_70 1]

<div class="poster-wrap" style="width:100%;height: 100vh;">
    	<canvas id="posterWrap" style="width: 100%;height: 100%;"></canvas>
    </div>
    <script> var img_big = 'https://***/img-lzj.jpg'; var img_code = 'https://***/img-code.png'; console.log(img_code) var poster = document.getElementById("posterWrap"); var cxt = poster.getContext("2d"); let dpr = window.devicePixelRatio; // 假设dpr为2 // 获取css的宽高 let { width: cssWidth, height: cssHeight } = poster.getBoundingClientRect(); // 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等 poster.width = dpr * cssWidth; poster.height = dpr * cssHeight; // 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小 // 所以需要将绘制比例放大 cxt.scale(dpr,dpr); // 可见区域宽 var w = document.body.clientWidth; // 可见区域高 var h = document.body.clientHeight; console.log(w) console.log(h) var imgbig = new Image; imgbig.src = img_big; imgbig.onload = function () { // 海报图 cxt.drawImage(imgbig, 0,0,w ,h-80 ); // 底部背景色 cxt.fillStyle="#ab141b"; cxt.fillRect(0,h-80 ,w ,80 ); // 二维码 var imgcode = new Image; imgcode.src = img_code; imgcode.onload = function () { cxt.drawImage(imgcode, 5 ,h-75 ,70 ,70 ); } // 长按图标 var iconca = new Image; iconca.src = 'img/icon-ca.png'; iconca.onload = function () { cxt.drawImage(iconca, 85 ,h-75 ,8 ,10 ); } // 长按文字 cxt.beginPath()//注意此处 cxt.fillStyle = '#fff'; // 文字填充颜色 cxt.font = '12px Adobe Ming Std'; cxt.fillText('长按图片购买',98 ,h-65 ); cxt.closePath()//注意此处 // 爆品产值限时购 var imgTips = new Image; imgTips.src = 'img/img-tips.png'; imgTips.onload = function () { cxt.drawImage(imgTips, (w-128),h-80 ,128 ,20 ); } // 城市文字 cxt.beginPath()//注意此处 cxt.fillStyle = '#fff'; // 文字填充颜色 cxt.font = '16px Adobe Ming Std'; cxt.fillText('济南 |',85 ,h-46 ); cxt.closePath()//注意此处 // 商品名称 cxt.beginPath()//注意此处 cxt.fillStyle = '#fff'; // 文字填充颜色 cxt.font = '16px Adobe Ming Std'; cxt.fillText('醉美枣庄辣子鸡',135 ,h-46 ); cxt.closePath()//注意此处 // 地址图标 var imgAddr = new Image; imgAddr.src = 'img/icon-dw.png'; imgAddr.onload = function () { cxt.drawImage(imgAddr, 85 ,h-37 ,5 ,8); } // 地址标题文字 cxt.beginPath()//注意此处 cxt.fillStyle = '#fff'; // 文字填充颜色 cxt.font = '10px Adobe Ming Std'; cxt.fillText('地址：',92 ,h-30 ); cxt.closePath()//注意此处 // 地址详情文字 cxt.beginPath()//注意此处 cxt.fillStyle = '#fff'; // 文字填充颜色 cxt.font = '10px Adobe Ming Std'; // cxt.fillText('万科中心401室经十路与奥体东路交叉口东北角',120,578); cxt.lineWidth=1; var str = "万科中心401室经十路与奥体东路交叉口东北角（浪潮东门，万科麓山南邻）距奥体东路经十路交叉口180m" var lineWidth = 0; var canvasWidth = w -140//计算canvas的宽度 var initHeight = h-30;//绘制字体距离canvas顶部初始的高度 var lastSubStrIndex= 0; //每次开始截取的字符串的索引 for(let i=0;i<str.length;i++){ lineWidth+=cxt.measureText(str[i]).width; if(lineWidth>canvasWidth){ cxt.fillText(str.substring(lastSubStrIndex,i),120,initHeight);//绘制截取部分 initHeight+=11;//40为字体的高度 lineWidth=25; lastSubStrIndex=i; } // if(i==str.length-1){//绘制剩余部分 // cxt.fillText(str.substring(lastSubStrIndex,i+1),120,initHeight); // } } cxt.closePath()//注意此处 // 商家电话文字 cxt.beginPath()//注意此处 cxt.fillStyle = '#fff'; // 文字填充颜色 cxt.font = '11px Adobe Ming Std'; cxt.fillText('商家电话：15555555555',85 ,h-5 ); cxt.closePath()//注意此处 } setTimeout(function() { var img = convertCanvasToImage(poster); $('.poster-wrap').html(img); layer.open({ content:'海报已生成，长按海报保存到本地', skin:'msg', time: 2}); console.log(img); }, 1000); function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } </script>

实现方式基本相同，多了一个文字超出换行功能：  
主要参考[https://www.cnblogs.com/hejun26/p/10239649.html][https_www.cnblogs.com_hejun26_p_10239649.html]

// 地址详情文字
    cxt.beginPath()//注意此处
    cxt.fillStyle = '#fff';   // 文字填充颜色
    cxt.font = '10px Adobe Ming Std';
    // cxt.fillText('万科中心401室经十路与奥体东路交叉口东北角',120,578);
    cxt.lineWidth=1; 
    var str = "万科中心401室经十路与奥体东路交叉口东北角（浪潮东门，万科麓山南邻）距奥体东路经十路交叉口180m"
    var lineWidth = 0;
    var canvasWidth = w -140//计算canvas的宽度
    var initHeight = h-30;//绘制字体距离canvas顶部初始的高度
    var lastSubStrIndex= 0; //每次开始截取的字符串的索引
    for(let i=0;i<str.length;i++){  
    	lineWidth+=cxt.measureText(str[i]).width; 
    	if(lineWidth>canvasWidth){   
    	cxt.fillText(str.substring(lastSubStrIndex,i),120,initHeight);//绘制截取部分
    	initHeight+=11;//40为字体的高度
    	lineWidth=25;
    	lastSubStrIndex=i;
    } 
    // if(i==str.length-1){//绘制剩余部分
    // cxt.fillText(str.substring(lastSubStrIndex,i+1),120,initHeight);
    // }
    }
    cxt.closePath()//注意此处

另外 beginPath() 和 closePath()的使用：  
主要参考：[https://blog.csdn.net/qq\_33974741/article/details/84474878][https_blog.csdn.net_qq_33974741_article_details_84474878]  
canvas 绘制可以通过 JS 代码来控制（其实应该说 HTML 5 只是提供了个容器，绘制只能在 JS 里完成），而 JS 提供了两个函数，beginPath() 和 closePath() ，这两个函数可以起到类似 div 的作用，用它来把每个圆圈包围，就可以绘制不同颜色的图形了。  
另外，在测试中，笔者还发现，当去掉所有的 closePath() 时，只保留 beginPath() ，一样可以达到目的，也就是说，当遇到beginPath() 时，会自动重新开始下一个图形的绘制（保留 closePath() ，去掉 beginPath() 时，效果相当于不添加这两个函数）。但是笔者个人认为，最好两个函数都添加，这样会提高代码可读性，使代码更规范。

官方解释 ：  
beginPath() 方法开始一条路径，或重置当前的路径。  
closePath() 方法创建从当前点到开始点的路径。  
个人理解 beginPath()相当于开始的点，closePath()相当于结束的点，搭配使用应该可以形成一个封闭的路径，这样在一个父图形中可以绘制多个不同的子图形。

海报主要绘制参考：  
[https://www.cnblogs.com/hejun26/p/10239649.html][https_www.cnblogs.com_hejun26_p_10239649.html]  
Canvas在移动端绘制模糊的原因与解决办法参考：  
[https://segmentfault.com/a/1190000019007037][https_segmentfault.com_a_1190000019007037]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4Mzg3_size_16_color_FFFFFF_t_70]: /images/20221022/1e809b8385d647aea7b0ae1f5125c0bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4Mzg3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021031918441010.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4Mzg3,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_hejun26_p_10239649.html]: https://www.cnblogs.com/hejun26/p/10239649.html
[https_blog.csdn.net_qq_33974741_article_details_84474878]: https://blog.csdn.net/qq_33974741/article/details/84474878
[https_segmentfault.com_a_1190000019007037]: https://segmentfault.com/a/1190000019007037