canvas生成圆图和微信小程序canvas圆图
Posted 小泽沐忧声
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas生成圆图和微信小程序canvas圆图相关的知识,希望对你有一定的参考价值。
先在html中创建 img和canvas并设置id属性
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas> <img src="./dialog.png" id="img" />
js中
微信小程序也可以使用。
当然获取canvas会不一样。微信小程序获取canvas,参考(https://www.cnblogs.com/1748sb/p/12955714.html)。
画圆采用\'yiven\'博主的:https://www.cnblogs.com/yiven/p/7551535.html 。
let c=document.getElementById(\'canvas\'); let img=document.getElementById(\'img\') let context=c.getContext(\'2d\'); // 图片加载 img.onload = function(e){ console.log(\'图片加载成功\',e) drawRoundedImg(50,100,100,100,50,img); } // 你会需要一张背景 function backGround(){ context.save(); context.fillStyle="#FFFFFF" context.fillRect(x,y,w,h); context.restore(); } // 你可能还需要生成一些文字 function text(){ context.save(); context.fillStyle="black"; context.font="25px 微软雅黑"; context.fillText(\'踏步走\',x,y); // 名字 context.restore(); } // 生成一张圆在插入图片 function drawRoundedImg(x,y,w,h,r,bgimg){ context.save(); context.beginPath(); context.moveTo(x+r,y); context.arcTo(x+w,y,x+w,y+h,r); context.arcTo(x+w,y+h,x,y+h,r); context.arcTo(x,y+h,x,y,r); context.arcTo(x,y,x+w,y,r); context.lineWidth = 1;//线条的宽度 context.strokeStyle = "red";//线条的颜色 context.stroke(); context.clip(); context.drawImage(bgimg, x, y, w, h); context.restore(); context.closePath(); }
生成后
以上是关于canvas生成圆图和微信小程序canvas圆图的主要内容,如果未能解决你的问题,请参考以下文章
开源基于微信小程序 Canvas API 实现的柱状图和趋势图