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 实现的柱状图和趋势图

react-native 和微信小程序wxml-to-canvas组件如何居中

微信小程序canvas生成图片为空白问题

canvas微信小程序如何导入个人微信

cropper图片编辑插件绘制圆形图片

射频&天线设计-Smith圆图