极客观点
项目管理
HarmonyOS
问题描述
我最近在试图对比Svg和Canvas的区别.当我根据浏览器大小改变画布的时候,我发现canvas出现了元素被拉伸的问题.
Canvas的放缩结果:
Svg的放缩结果:
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>svgDemo</title>
</head>
<body>
<svg id="svgBoard" style="background:cornsilk; width: 90vw; height: 90vh; display:none;" viewbox="0 0 300 150">
<ellipse cx="100.000" cy="100.000" rx="50.000" ry="50.000"></ellipse>
</svg>
<canvas id="canvasBoard" style="background:cornsilk; width: 90vw; height: 90vh;"></canvas>
<script>
let canvas = document.getElementById('canvasBoard');
let ctx = canvas.getContext('2d');
ctx.ellipse(100, 100, 50, 50, 0, 0, 2 * Math.PI);
ctx.fill();
</script>
</body>
</html>你期待的结果是什么？
我期待在元素不被过度拉伸的情况下,可以对其尺寸进行自适应变化.
我尝试过使用js来更改canvas画布大小,但是它并不会将元素放大,只会改变画布自身的效果.
window.onresize=resizeCanvas;
function resizeCanvas(){
canvasBoard.width=window.innerWidth/3;
canvasBoard.height=window.innerHeight/3;
drawTool();
}
resizeCanvas();
直接使用css来控制canvas的显示大小
canvas有两个宽度和高度：
一个是直接写在canvas标签上的，是画布的大小，比如：
<canvas width="100" height="100"></canvas>另一个是显示大小（css大小），比如：
.canvas { width:100%;height:100%; }