使用jCanvaScript插件简化canvas操作来画界面.

直接上代码，拷贝到文件里直接运行就能看到效果；插件地址jCanvaScript：http://jcscript.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jcanvas</title>
</head>
<script src="jCanvaScript.1.5.18.js"></script>
<body>
     <canvas height="568" width="320" id="canvas_1" style="border:1px solid #ccc;width:320px;height:568px"></canvas>
</body>
<script>
    var h = 1;
    var img=new Image();
        img.src="./head.png"
      
    jc.start('canvas_1');
    
    jc.rect(0,0,320*h,130*h,'#ff5d5e',true);
    jc.text("个人中心",160*h,24*h,'rgb(255,255,255)',1).id('myText_2');
    jc('#myText_2').align('center').font(15*h+'px 微软雅黑');
    jc.circle(46*h,70*h,26*h,'#fe9695',true);//头像背景淡粉色
    img.onload=function(){
        jc.start('canvas_1',true);
        var clip = jc.circle(46*h,70*h,26*h);//画需要裁切的图案        
        jc.image(img,23*h,47*h,46*h,46*h).clip(clip);//在图片后面加裁切图形
        jc.start('canvas_1');
    }
    
    jc.text("Rainbow",46*h,110*h,'rgb(255,255,255)',1).id('myText_3');//绘制名字
    jc('#myText_3').align('center').font(12*h+'px 微软雅黑');//名字样式
    drawFont("￥109",126,70,16);
    drawFont("可用余额",126,90,12);
    jc.line([[166*h,56*h],[166*h,94*h]],'#fff');
    drawFont("￥1009",204,70,16);
    drawFont("冻结金额",204,90,12);
    jc.line([[243*h,56*h],[243*h,94*h]],'#fff');
    drawFont("600",270,70,16);
    drawFont("积分",270,90,12);
    
    jc.rect(0,130,320*h,10*h,'#f7f7f7',true);
    jc.start('canvas_1');
    
    function drawFont(val,l,t,fontsize){//val:字,l:左距离，t：上距离，fontsize：字体大小
        jc.text(val,l*h,t*h,'rgb(255,255,255)',1).align('center').font(fontsize*h+'px 微软雅黑');
    }
</script>
</html>

使用jCanvaScript插件简化canvas操作来画界面.

smallStone

引用和评论

收藏的好东西

vue3中实现live2D技术的应用虚拟角色数字人live2d-render、pixi-live2d-display