使用静态分辨率缩放canvas元素 [英] Scaling canvas element with static resolution

问题描述

我有canvas元素，我想缩放，但不改变它的js逻辑。 js中的绘图空间应始终为600x300像素，即使它在HTML中显示为300x150像素。

I have canvas element and I want to scale it down, but without changing it's js logic. Drawing space in js should always be 600x300px, even if it is displayed in HTML as 300x150px. I know, I can resize image with static resolution, but can I do the same with canvas?

推荐答案

使用CSS更改大小缩放

Changing the size using CSS scales it

现场演示

所以基本上你通过 width 和 height 设置绘图对象等的大小。属性如下

So basically you set its size for drawing objects, etc, via the width and height properties like so

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 300;

，然后使用css更改其显示大小

and then change its displayed size using css

#canvas{
   width: 300px;
   height: 150px; 
}​

这篇关于使用静态分辨率缩放canvas元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！