收藏
回答

canvas无法定义宽度和高度

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvasContext 客户端 v1.02.1811290 2.0

这是我在wxml文件中定义的canvas:

<canvas canvas-id="arcCanvas"style="width:{{mywinWidth}}; height:{{myWinWidth}};" ></canvas>


//下面是我在js文件中onLoad(){....}函数中获取的两个值:

wx.getSystemInfo({

success(res) {

circleRound = (res.windowWidth) / 2;

var  my_js_WinWidth = res.windowWidth;//获取到了窗口的宽度

that.setData({

mycircleRound: circleRound, //成功设置数据绑定,加载到WXML文件中

mywinWidth: my_js_WinWidth    //成功设置数据绑定,加载到WXML文件中,而且控制台也显示相关信息:

})

}

})

//成功设置数据绑定,编译以后,在控制台的WXML栏目也显示出如下信息:

//在控制台的WXML栏目也显示出如下信息:

<canvascanvas-id="arcCanvas"style="width:414; height:414;"></canvas>

//但是在控制台的Styles栏目却显示出如下信息:

Styles

element.style {

}

* {

margin:0;

}

page {

-webkit-user-select:none;

user-select:none;

width:100%;

overflow-x:hidden;

}

截图如下:











这个效果是固定的高度和宽度,不同的手机效果会不同,我需要满屏显示星空图

最后一次编辑于  2018-12-25  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 卢霄霄
    卢霄霄
    2018-12-26

    你style栏选中的是page。。。

    2018-12-26
    赞同 1
    回复
  • 裴英轩
    裴英轩
    2018-12-26

    class无效,

    class="width:420px; height:444px;"

    JS里面显示错误:

    // ctx.canvas.width=2*circleRound;//行不通

    // ctx.canvas.height=2*circleRound;//行不通

    // ctx.width=2*circleRound;//行不通

    // ctx.height=2*circleRound;//行不通

    如果有解决思路请你直接说答案好么?


    2018-12-26
    赞同
    回复