如何在canvas 画图加文字

Posted 2023-05-11

参考技术A 这个看楼主是具体要怎么实现了，其实文字层也是可以直接加在CANVAS上的，而如果是用CANVAS文字的画，是要有一些特别的代码的，可以去参考国内外的一些成熟的2D游戏引擎，一般都会有文字的实现。本回答被提问者和网友采纳

html5的canvas怎么调整画图的清晰度？

参考技术A 不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。\\x0d\\x0a首先，引入上方这个polyfill;\\x0d\\x0a然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法\\x0d\\x0a \\x0d\\x0avar getPixelRatio = function(context) \\x0d\\x0a var backingStore = context.backingStorePixelRatio ||\\x0d\\x0a context.webkitBackingStorePixelRatio ||\\x0d\\x0a context.mozBackingStorePixelRatio ||\\x0d\\x0a context.msBackingStorePixelRatio ||\\x0d\\x0a context.oBackingStorePixelRatio ||\\x0d\\x0a context.backingStorePixelRatio || 1;\\x0d\\x0a return (window.devicePixelRatio || 1) / backingStore;\\x0d\\x0a;\\x0d\\x0a \\x0d\\x0a//调用\\x0d\\x0avar ratio = getPixelRatio(ctx);\\x0d\\x0a\\x0d\\x0a之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：\\x0d\\x0a\\x0d\\x0a1\\x0d\\x0a \\x0d\\x0actx.drawImage(document.querySelector(\'img\'), 10, 10, 300 * ratio, 90 * ratio);