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

未东兴发布于2019-08-26 18:42 / 1724人阅读

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

一、如何正确设置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 2019-08-30 15:44 评论0 收藏0
Canvas 与 SVG

摘要：大写表示绝对定位，小写表示相对定位。虽然通常被视为具有高性能，但是并不意味着它就是明显的选择。下图显示了对象和对象之间在呈现时间上的差异。在中，每个被绘制的图形均被视为对象。如果对象的属性发生变化，那么浏览器能够自动重现图形。什么是SVG？引用w3c的一段话就是： SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量...

leanote 2019-08-02 18:05 评论0 收藏0
移动端 html2canvas 踩坑记录

摘要：原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容，因此需要先显示页面，在图片生成后再隐藏。解决方法设为绝对定位，使用屏幕宽度作为基准设置值。背景最近在做的微信 html5 项目有个需求：页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片，让用户长按保存的时候，可以把整个页面都保存起来，而不是只保存二维码。思考 1.前后端哪个实现方法会更高效虽然图片...

妤锋シ 2019-06-25 12:28 评论0 收藏0
移动端 html2canvas 踩坑记录

摘要：原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容，因此需要先显示页面，在图片生成后再隐藏。解决方法设为绝对定位，使用屏幕宽度作为基准设置值。背景最近在做的微信 html5 项目有个需求：页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片，让用户长按保存的时候，可以把整个页面都保存起来，而不是只保存二维码。思考 1.前后端哪个实现方法会更高效虽然图片...

xfee 2019-06-25 17:02 评论0 收藏0
移动端 html2canvas 踩坑记录

摘要：原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容，因此需要先显示页面，在图片生成后再隐藏。解决方法设为绝对定位，使用屏幕宽度作为基准设置值。背景最近在做的微信 html5 项目有个需求：页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片，让用户长按保存的时候，可以把整个页面都保存起来，而不是只保存二维码。思考 1.前后端哪个实现方法会更高效虽然图片...

kviccn 2019-08-05 15:31 评论0 收藏0