canvas学习笔记3_宽高设置

<style>
#dom {
    background: #000;
}

#canvas1 {
    background: #000;
    width: 300px;
    height: 300px;
}

#canvas2 {
    background: #000;
}
</style>
<canvas id="dom"></canvas>
<canvas id="canvas1"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<script>
// 原始宽高
var canvas = document.getElementById("dom");
var context0 = canvas.getContext("2d");

context0.beginPath();
context0.arc(100, 100, 50, 0, Math.PI * 2, true);
context0.closePath();
context0.fillStyle = 'rgb(255,255,255)';
context0.fill();

// css 设置宽高
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgb(255,255,255)';
context.fill()

// 通过width,height设置宽高
var canvas = document.getElementById("canvas2");
var context2 = canvas.getContext("2d");

context2.beginPath();
context2.arc(100, 100, 50, 0, Math.PI * 2, true);
context2.closePath();
context2.fillStyle = 'rgb(255,255,255)';
context2.fill()
</script>

显示结果如下：

说明： 从图中可以看到： canvas原始尺寸：300 * 150

css 设置宽高，出现变形