1.如何正确设置画布大小？Canvas有两种宽高：1.一种是width和height属性，一般称为canvassize，即绘制图形的地方。默认值分别是300px和150px。例子：2.另一个是css样式中的width和height属性，可以通过内联样式，内部样式表或者外部样式表来设置.一般称为画板尺寸，用于渲染绘制的图形。默认为空。示例：或：如果设置了画布尺寸，则不设置画板尺寸，或者两者均未设置，则画板尺寸随画布尺寸变化。但是如果设置了画板尺寸，但是没有设置画布尺寸，或者单独设置，那么画板尺寸将不再随画布尺寸变化。如果两个设置的大小不同，就会出现问题。渲染时，画布必须进行缩放，使其与画板大小一致，画在画布上的图形也会随之缩放，从而造成变形和扭曲。示例：最终的显示结果，绘制在画板上的图形（200X200）：在画布上（300X150）绘制在画布上的图形：显然，画布上的图形在渲染时发生了变形。为避免这种情况发生，请保持画布大小和画板大小相同。2、如何在高分辨率屏幕上清晰显示canvas图形？前文提到，为避免图形变形和失真，请保持画布尺寸与画板尺寸一致。这只适用于低分辨率的设备，devicePixelRatio为1。对于高分辨率的屏幕，它的devicePixelRatio大于1。canvas绘制的图形是位图，即光栅图像或位图图像。渲染到高清屏幕时，会放大，每个像素都会用devicePixelRatio的正方形物理像素渲染，所以画面会变得模糊。解决方法如下：示例：设置画布大小为window.devicePixelRatio乘以画板大小：varcanvas=文件。getElementById('画布');canvas.width=canvas.clientWidth*window.devicePixelRatio;canvas.height=canvas.clientHeight*window.devicePixelRatio;注意：样式设置的宽度是元素内容的宽度，不包括内边距和边框，边距，clientWidth包括边距，不包括边框、边距和滚动条（如果有的话）。varcontext=canvas.getContext('2d');绘制图形有两种方式：1.每次绘制相应放大context.beginPath();context.moveTo(0,0);context.lineTo(200*window.devicePixelRatio,200*window.devicePixelRatio);context.lineWidth=context.lineWidth*window.devicePixelRatio;context.stroke();2.使用scale()缩放然后绘制context.scale(window.devicePixelRatio,window.devicePixelRatio);context.beginPath();context.moveTo(0,0);context.lineTo(200,200);context.stroke();
