码迷,mamicode.com
首页 > 微信 > 详细

canvas生成圆图和微信小程序canvas圆图

时间:2020-05-25 12:48:38      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:jpg   nbsp   画圆   生成   bsp   save   canvas   image   sep   

 

 

先在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 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圆图

标签:jpg   nbsp   画圆   生成   bsp   save   canvas   image   sep   

原文地址:https://www.cnblogs.com/1748sb/p/yiven.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!