使用jCanvaScript插件簡化canvas操做來畫界面.

時間 2019-12-07

標籤使用 jcanvascript 插件簡化 canvas 界面简体版

原文原文鏈接

直接上代碼，拷貝到文件裏直接運行就能看到效果；插件地址jCanvaScript：http://jcscript.comhtml

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。