这个实例想说，我们在用canvas画图时要用第三种方式吗
来源：2-2 Canvas坐标体系（2）
unbreakable_全栈
2020-09-25 15:04:59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myCanvas {
border: 1px solid red;
width: 100px;
height: 50px;
}
#myCanvas2, #myCanvas3 {
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 如下代码， 第一个画布通过css设置大小， 第二个画布是默认的宽高， 第三个画布是通过js代码设置的大小。 三个画布上都画了一条线（0,0）到（100， 100） -->
<!-- 第一个画布可以完全显示画的线， 对比的最后一个画布， 画的线并没有完整显示出来， 对比实现的效果可以知道第一个画布是等比例缩小了。 -->
<canvas class="canvas" id="myCanvas">你的浏览器不支持canvas</canvas>
<canvas class="canvas" id="myCanvas2">你的浏览器不支持canvas</canvas>
<canvas class="canvas" id="myCanvas3">你的浏览器不支持canvas</canvas>
<script>
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
ctx.moveTo(0, 0)
ctx.lineTo(100, 100)
ctx.stroke()
console.log(canvas.width, canvas.height)
</script>
<script>
var canvas2 = document.getElementById('myCanvas2')
var ctx2 = canvas2.getContext('2d')
ctx2.moveTo(0, 0)
ctx2.lineTo(100, 100)
ctx2.stroke()
console.log(canvas2.width, canvas2.height)
</script>
<script>
var canvas3 = document.getElementById('myCanvas3')
var ctx3 = canvas3.getContext('2d')
canvas3.width = 100
canvas3.height = 50
ctx3.moveTo(0, 0)
ctx3.lineTo(100, 100)
ctx3.stroke()
console.log(canvas2.width, canvas2.height)
</script>
</body>
</html>
1回答
-
同学你好，没错。如果使用css改变画布大小，会产生缩放。要改变画布大小，一般在标签中或者通过js改变。第三种是可以的，第一种要改成在标签中，使用宽高使用设置大小才可以，示例：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 1
回答 4