Question

如何控制canvas自适应屏幕，可以根据屏幕的尺寸，适应现实

Answer 1

可以用JS监控屏幕大小，然后调整Canvas的大小。在代码中加入JS

1
2
3
4
5
6
7

$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).<a href="https://www.baidu.com/s?wd=get&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4P1NWPyD4m1I-mWb1njw90ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHmvrHcLPWnYn1n4njcznjT3Ps" target="_blank" class="baidu-highlight">get</a>(0).innerWidth);
canvas.attr("height", $(window).<a href="https://www.baidu.com/s?wd=get&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4P1NWPyD4m1I-mWb1njw90ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHmvrHcLPWnYn1n4njcznjT3Ps" target="_blank" class="baidu-highlight">get</a>(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());
};
resizeCanvas();

就可以了。