小程式Canvas 畫刻度

1、axml

.canvas

let _this;

let unitline = 10;
// 中刻度線的長度
let middleunitline = 15;
// 長刻度線的長度
let longunitline = 20;
// 中間線的長度
let centerline = 50;
// 刻度的單位
let unit = 1000;
// 刻度的間距
let spacing = 10;
// 最大值
let max = 50000;
// 停止後的值
let sum;
let _arr = 
page(,
// 刻度部分
onready() 
})},
// 刻度部分
drawrule(n) );}})
context.height = 200;
// 短刻度線的長度
n += context.width / 2 - 5 * spacing
// // 繪製基準線
context.beginpath();
context.setstrokestyle('#ff8a00');
context.setlinewidth(2);
context.moveto(context.width / 2, context.height / 2);
context.lineto(context.width / 2, context.height / 2 - centerline);
context.stroke();
context.closepath();
context.beginpath();
context.setstrokestyle('#aaa');
context.setlinewidth(1);
context.moveto(0, context.height / 2);
context.lineto(context.width, context.height / 2);
context.closepath();
context.stroke();
var num = 0;
// 繪製刻度線
context.beginpath();
for (var i = 0; i <= max / unit * spacing / 10; i++) else 
if (math.abs(spacing * i + n - context.width / 2) < 5) 
context.stroke();
}context.closepath();
context.draw();
},// 刻度開始移動事件
start(e) ,
// 刻度正在移動事件
move(e) 
else if (_this.a < -max / unit * spacing + 5 * spacing) 
_this.drawrule(_this.a);
},// 刻度停止移動事件
end() )
},});

Html5畫布canvas小例

小例中用到了畫布canvas的畫矩形，畫圓或弧，畫線，畫文字，顏色漸變。其全部顏色 字型 圖形都是通過js在canvas上繪製形成，總結了幾個context物件的方法如下 1.畫矩形 fillrect x,y,width,height 矩形左上角點x座標，矩形左上角點y座標,矩形寬度，矩形高度 2....

WeZRender 微信小程式Canvas增強元件

canvas增強元件，基於html5 canvas類庫zrender。wxml canvas js var wezrender require lib wezrender zr wezrender.zrender.init line canvas 1 375,600 資料驅動 利用wezrender...

微信小程式之canvas

initcanvas 複製 rem px 複製 opt.x opt.y x,y是矩形的起點 opt.w opt.h w,h是矩形的寬高 opt.color 顏色 ffffff opt.opacity 透明度 1 opt.fill 是否填充 false drawrect opt else ctx.re...