HTML画布制作模糊形状

Question

HTML画布制作模糊形状

javascripthtmlcanvashtml5-canvas

4

我想使用HTML制作简单的形状。

但是这些形状需要很大。

并且画布是全屏的。

示例: http://jsfiddle.net/xLgg43s9/1/embedded/result/

代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* { margin: 0; padding: 0;}

body, html { height:100%; }

#canvas {
    position:absolute;
    width:100%;
    height:100%;
}
</style>
</head>

<body>
<canvas id="canvas">
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#000";
var w=canvas.width;
var h=canvas.height;
ctx.fillRect(0,0,w,h);
ctx.fillStyle="#fff";
ctx.beginPath();
var a=w/2;
var b=0;
ctx.arc(a,b,20,0,Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red";
ctx.fillRect(0,0,10,100);
ctx.stroke();
ctx.save();

ctx.translate(240, 120);

ctx.rotate(Math.PI / 4); // 45 degrees

ctx.fillStyle = "yellow";
ctx.fillRect(-40, -40, 20, 20);

ctx.restore();

</script>
</body>
</html>

请修复它。

- kritya

可能是调整HTML5画布以适应窗口大小的重复问题。 - Philipp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cerbrus · Accepted Answer

不要通过CSS设置canvas的大小，因为那会拉伸canvas元素，而不是实际使canvas变大。请改用HTML属性进行设置：

<canvas id="canvas" width="500" height="500"></canvas>

现在，如果您想将画布设置为100％的宽度/高度，那些预设属性将无法为您完成这项任务，因此您需要使用一些JS：

var canvas = document.getElementById("canvas");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext("2d");
// etc...

如果你想让画布在窗口大小调整时也进行调整，我建议你看看这个答案。