微信小程序canvas 2d 样式设置，笔记

1、样式设置 

/* 设置线条颜色 */
ctx.strokeStyle = '#333333';
/* 设置线条粗细 */
ctx.lineWidth = 4;
/* 设置线条的结束端点样式 */
ctx.lineCap = 'round';
ctx = ctx;
/* 设置背景色 */
ctx.fillStyle = "#ffffff";
//设置背景填充
ctx.fillRect(0, 0, _this.canvas.width, _this.canvas.height); 

// 文本字体大小
ctx.font = '14px Arial';
// 文本位置
ctx.textAlign = "center";
// 文本颜色
ctx.fillStyle = "#ffb7af";

 2、宽高设置

<div class="full-width mt-10" style="height: calc(100% - 120px)" id="canvasBox">
<!--2d canvas 从2.9.0开始支持新canvas2d版 -->
<canvas :style="{width: canvasWidth+'px',height: canvasHeight+'px'}"
        id="myCanvasId"
        type="2d"
        disable-scroll
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @touchcancel="handleTouchCancel">
</canvas>
</div>
</div>

const query = uni.createSelectorQuery().in(_this);
          query.select("#canvasBox").boundingClientRect(function (res) {
                        // console.log(res)
                        /*获取画板可用区域宽高*/
                        _this.canvasWidth = res.width > 600 ? 600 : res.width;
                        _this.canvasHeight = res.height > 1000 ? 1000 : res.height;
                        const query1 = uni.createSelectorQuery().in(_this);
                        query1.select("#myCanvasId").node(function (res) {
                            _this.canvas = res.node;
                            let ctx = _this.canvas.getContext('2d');
                            const dpr = uni.getSystemInfoSync().pixelRatio;
                            _this.canvas.width = _this.canvasWidth * dpr;
                            _this.canvas.height = _this.canvasHeight * dpr;
                            ctx.scale(dpr, dpr);


}