canvas元素的实际尺寸（宽度，高度）是由标签上的属性width和height来决定的。
这两个属性不设置时默认值为：宽度=300px，高度=150px。
如果在样式表里设置width和height，则表示在实际宽度和高度的基础上进行缩放，缩放后的尺寸为样式里设置的width和height。
示例代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>canvas</title>
<style type="text/css">
#diagonal {
border:1px solid #000; width:200px; height:400px;
}
</style>
</head>
<body>
<canvas id="diagonal" width="200" height="200"></canvas>
<script type="text/javascript">
function drawDiagonal() {
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,50);
context.lineTo(0, 150);
context.moveTo(0, 50);
context.lineTo(100, 150);
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</body>
</html>
上述代码根据属性中设置的值<width="200" height="200">生成一个200*200的元素
，
然后根据样式中设置的值<width:200px; height:400px;>缩放为200*400的元素
这也是只用样式设置canvas尺寸时绘制出来的图形感觉变形的原因
时间： 2024-10-03 14:03:26