直接上代码，拷贝到文件里直接运行就能看到效果；插件地址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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。