< canvas
type = "2d"
id = "canvas"
style = "width: 100%; height: 500px;"
></ canvas >
|
Page({
data: {
},
onLoad: function () {
wx.createSelectorQuery()
.select( '#canvas' )
.fields({
node: true ,
})
.exec( this .init.bind( this ))
},
init(res) {
const canvas = res[0].node
const ctx = canvas.getContext( '2d' )
this .drawPath(ctx)
},
drawPath(ctx){
var dwidth = 800 / 80.0;
var pos = Math.ceil(Math.random() * 75) + 30;
for ( var i = 0; i < 80; i++) {
ctx.beginPath();
ctx.moveTo((i * dwidth), pos);
var pos2 = Math.ceil(Math.random() * 75) + 30;
ctx.lineTo(((i + 1) * dwidth), pos2);
pos = pos2;
ctx.stroke();
}
ctx.strokeStyle = "green" ;
for ( var i = 10; i < 80; i++) {
ctx.clearRect((i * dwidth), 0, ((i + 1) * dwidth), 150);
ctx.beginPath();
ctx.moveTo((i * dwidth), pos);
var pos2 = Math.ceil(Math.random() * 75) + 30;
ctx.lineTo(((i + 1) * dwidth), pos2);
pos = pos2;
ctx.stroke();
}
}
})
|
开发工具中显示是清晰的,在真机预览是模糊的,麻烦帮忙看一下是哪里的问题?
要根据 dpr 设置一下 canvas 的宽高。默认宽高是 300x150,所以会变形。
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
我根据 dpr 设置了 canvas 的宽高,但在画路径的时候还是线条还是会出现粗细不均的情况。
微信版本:7.0.7 ,我用了华为mate20,和ipone5 测试
ctx.lineWidth = 1.5; //设为小数线条粗细不均会更加明显
断码片断: https://developers.weixin.qq.com/s/j54J2vmk7vcF
在其它案例画时使用ctx.clearRect() 清楚区域会出现一些毛刺,麻烦帮忙查看是什么原因。
麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)