HQChart小程序教程2-如何使用新版2D画布创建一个K线图

小程序 Canvas 2D 接口

小程序画布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。
文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

hqchart使用2D画布步骤

1. 在.wxml文件种新建一个canvas元素， 增加类型(type)为2d.

<canvas class="historychart"  canvas-id="historychart" id='historychart' type="2d"  
    style="height:553px; width:375px;" 
    bindtouchstart='historytouchstart' bindtouchmove='historytouchmove' bindtouchend='historytouchend'>
</canvas>

2. 通过select查询画布，并初始化hqchart.

onReady() 
{
    var self = this
    // 获取系统信息
    wx.createSelectorQuery()
        .select('#historychart')
        .fields({
            node: true,
            size: true,
        })
        .exec(self.CreateKLineChart.bind(this)); //初始化hqchart
},

CreateKLineChart:function(res)
{
    console.log('[App::CreateKLineChart] res ', res);
    
    //设置黑色风格
    var style = JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);
    JSCommon.JSChart.SetStyle(style);
    
    //创建历史K线类
    var element = new JSCommon.JSCanvasElement();
    element.ID = 'historychart';
    element.CanvasNode = res[0];	//绑定通过select查询出来的画布节点
    element.Height = this.data.Height ;   //高度宽度需要手动绑定!! 微信没有元素类
    element.Width = this.data.Width ;
    this.HistoryChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中
    this.HistoryChart.SetOption(this.HistoryOption);
},

3. 其他的操作和老版的一样。

使用微信新版画布经验总结

1. 获取画布元素需要通过select来获取，然后通过这个元素来获取画布。
2. 画布使用的时候需要获取手机像素倍数，然后画布大小需要放大手机的像素倍数
3. 新版本画布操作是同步，而老版本是异步的，需要通过draw来操作。所以为了兼容老版本，在获取新的画布实例以后， 在这个实例里面创建一个空的draw() 方法， 这样调用draw就不会报错

function JSCanvasElement() 
{
    this.Height;
    this.Width;
    this.ID;
    this.WebGLCanvas;
    this.IsUniApp=false;
    this.CanvasNode=null;

    //获取画布
    this.GetContext = function () 
	{
        var canvas;
        if (this.CanvasNode && this.CanvasNode.node)  //新版本
        {
            const width = this.CanvasNode.width;
            const height = this.CanvasNode.height;

            var node = this.CanvasNode.node;
            node._height = height;
            node._width = width;
            console.log("[JSCanvasElement::GetContext] create by getContext('2d')");
            canvas = node.getContext('2d');
            const dpr = wx.getSystemInfoSync().pixelRatio; //获取分辨率比例
            node.width = width * dpr;
            node.height = height * dpr;
            canvas.scale(dpr, dpr);	//扩大
            canvas.draw = (bDraw, callback) => { if (callback) callback(); };
            canvas.DomNode = node;
        }
        else 	//老版本
        {
            canvas=wx.createCanvasContext(this.ID);
        }

4. canvasToTempFilePath 在新版里面使用 canvas 参数（就是通过select查询出来的元素变量）， 老版本是使用 canvasId， 这个需要注意下
5. drawImage 新版本无法直接使用临时图片路径， 需要通过一个image来转换下。

if (self.Canvas && self.Canvas.DomNode) //新版本2D画布
{
    let tempImage = self.Canvas.DomNode.createImage();  //新版本的必须要装成image类 比较坑
    tempImage.src = this.Frame.ScreenImagePath;
    self.Canvas.clearRect(0, 0, width, height);
    self.Canvas.drawImage(tempImage, 0, 0, width, height);
    self.DrawDynamicChart(false);
}
else
{
    self.Canvas.drawImage(this.Frame.ScreenImagePath, 0, 0, width, height); //老版本直接放图片本地路径
    self.DrawDynamicChart(false);
}

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址
地址：https://github.com/jones2000/HQChart