canvas无法定义宽度和高度
发布于 6 年前 作者 jun18 14601 次浏览 来自 问答

这是我在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;

}

截图如下:











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

2 回复

你style栏选中的是page。。。

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;//行不通

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

回到顶部