使用canvas怎么制作一个海报
使用canvas怎么制作一个海报?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
我们提供的服务有:成都网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、皮山ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的皮山网站制作公司
dom节点很简单,生成个canvas标签随意写点属性就可以了~
var canvas = document.getElementById("myCanvas"); //获取canvas节点 function imageToCanvas(canvas,url1,url2,code) { //传入canvas节点 背景图url1 头像url2 二维码code var ctx = canvas.getContext("2d"); var img1 = new Image(); img1.src = url1; //前面的不解释了,生成个图片 img1.onload = function(){ ctx.drawImage(img1,0,0); //当图片加载完成后 赋到画布上 从0 0 开始。 var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); //保存当前画布状态 ctx.arc(374, 134, 44, 0, 2 * Math.PI); //剪切操作 将正方形的头像切成圆的 // 从画布上裁剪出这个圆形 ctx.clip(); //进行裁剪 ctx.drawImage(img2, 330, 90, 88, 88); //放入img2 在330 90坐标处 大小 88 ctx.restore(); //释放画布状态 ctx.font="28px Arial"; ctx.textAlign="center"; ctx.fillStyle ='#FFFFFF'; //前面是设置文字 属性设为居中 ctx.fillText("你叫神马名字",375,220); //文字 这里是写死的 实际中多传个参数就ok var img3 = new Image(); img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); //同理加图像 var imgCode = convertCanvasToImage(canvas); //将图片转为base64 console.log(imgCode.getAttribute('src')) } } } } imageToCanvas(canvas,"1.png",'3.jpeg','code.png'); //初始化 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); //canvas转化为img return image; }
看完上述内容,你们掌握使用canvas怎么制作一个海报的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
文章标题:使用canvas怎么制作一个海报
文章转载:http://scyanting.com/article/jsgjoc.html