zoukankan      html  css  js  c++  java
  • 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();
    }

      

    生成后

      

    有问题联系QQ1291481728或在下方评论,会在第一时刻处理。
  • 相关阅读:
    java内部类
    navicat使用教程-PJ
    提交代码时的注意事项
    多线程技术
    Apache POI使用详解
    网站链接收藏夹
    MySQL优化
    Oracle创建用户、角色、授权、建表
    oracle 安装提示未找到文件安装
    Json对象与Json字符串的转化、JSON字符串与Java对象的转换
  • 原文地址:https://www.cnblogs.com/1748sb/p/yiven.html
Copyright © 2011-2022 走看看