资讯专栏INFORMATION COLUMN

如何正确设置canvas尺寸,以及如何在高分辨率屏幕上清晰显示canvas图形

未东兴 / 1989人阅读

摘要:一如何正确设置尺寸有两种一种是属性,一般称其为画布尺寸,即图形绘制的地方。一般称其为画板尺寸,用于渲染绘制完成的图形。二如何在高分辨率屏幕上清晰显示图形上面说过,避免图形变形失真,要保持画布尺寸和画板尺寸一致。

一、如何正确设置canvas尺寸?

Canvas有两种width、height:
1、一种是width、height属性,一般称其为画布尺寸,即图形绘制的地方。默认值分别为300px、150px。
例:

2、另一种是css样式里的width、height属性,可通过内联样式、内部样式表或外部样式表设置。一般称其为画板尺寸,用于渲染绘制完成的图形。默认值为空。
例:

或:

如果设置了画布尺寸,未设置画板尺寸,或者两者都未设置,那么画板尺寸随画布尺寸改变。
但若设置了画板尺寸,而未设置画布尺寸,或者分别设置了,那么画板尺寸将不再随画布尺寸而改变。如果两者设置的尺寸不一样时,就会产生一个问题,渲染时画布要通过缩放来使其与画板尺寸一样,那么画布上已经绘制好的图形也会随之缩放,随之导致变形失真。
例:

最终显示结果,在画板(200X200)上渲染的图形:

在画布(300X150)上绘制的图形:

显然,画布上的图形在渲染时变形了。
为了避免发生这种情况,保持画布尺寸和画板尺寸一致。

二、如何在高分辨率屏幕上清晰显示canvas图形?

上面说过,避免图形变形失真,要保持画布尺寸和画板尺寸一致。这只是针对分辨率不高的设备而言,其devicePixelRatio为1。而高分辨率屏幕,它的devicePixelRatio大于1。
canvas绘制的图形是位图,即栅格图像或点阵图像,当将它渲染到高清屏时,会被放大,每个像素点会用devicePixelRatio的平方个物理像素点来渲染,因此图片会变得模糊。

解决方法如下:
例:

将画布尺寸设置为画板尺寸的window.devicePixelRatio倍:

var canvas=document.getElementById("canvas");    
canvas.width=canvas. clientWidth*window.devicePixelRatio;
canvas.height=canvas.clientHeight*window.devicePixelRatio;   

注意:样式设置的width是的元素内容宽度,不包括内边距、边框、外边距的,而clientWidth包括内边距,不包括边框、外边距、滚动条的(如果有)。
var context=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();

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110320.html

相关文章

  • 如何正确设置canvas尺寸以及如何在高辨率屏幕清晰显示canvas图形

    摘要:一如何正确设置尺寸有两种一种是属性,一般称其为画布尺寸,即图形绘制的地方。一般称其为画板尺寸,用于渲染绘制完成的图形。二如何在高分辨率屏幕上清晰显示图形上面说过,避免图形变形失真,要保持画布尺寸和画板尺寸一致。 一、如何正确设置canvas尺寸? Canvas有两种width、height:1、一种是width、height属性,一般称其为画布尺寸,即图形绘制的地方。默认值分别为300...

    cncoder 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<