canvas要想在浏览器正常显示的话要写成以下这种形式
<canvas id="c1" height="300px" width="300px" style="background-color: yellow"></canvas>
写成以下两种方式绘图时坐标会错误
<canvas id="c1" style="height: 300px;width: 300px;background-color: yellow"></canvas>
<canvas id="c1"></canvas>
#c1{
background-color: yellow;
height: 300px;
width: 300px;
}
官方可参考这篇文章:https://www.jb51.net/html5/147328.html
而在微信小程序中直接给canvas通过width,height赋值时是无效的,另外两种添加样式方法绘图时坐标会不正确,这就造成无法在canvas中正常绘图,希望官方能修复一下这个问题
最新版本同样发现这个问题 是否有解决方案了?
你好,复现代码可看一下我在这篇帖子中的回复,点击下方链接即可查看
https://developers.weixin.qq.com/community/develop/doc/00066ad6aa8c20f16d8bd5cff5b000?jumpto=comment&commentid=0006869d3546608c6e8be07d15b8
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
onShow: function () {
wx.createSelectorQuery().select("#c1").node(res=>{
console.log(res)
var canvas = res.node
var x = canvas.getContext('2d')
x.fillStyle = "red"
x.rect(10, 10, 150, 40)
x.fill()
}).exec()
},
展示图:
按理说红色矩形的左上角离画布的左上角都是20px,并且红色矩形的宽为150px,高为40px才对,你看一下显示效果,这很明显不对呀