刚学canvas,今天在<canvas>设置宽高时遇到问题
一直以为在<style></style>中设置宽高和直接设置<canvas>的宽高没有什么区别,进行了一番尝试，发现了问题所在
- 在<canvas>中设置宽高相当于直接设置了画布的大小
- 特别提醒一点，<canvas>默认的宽高为300px*150px,在<style></style>设置宽高相当于对画布进行拉伸或缩放，而画布的右下角坐标仍保持（300，150）不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画线</title>
<style type="text/css">
#canvas
{
width:600px;
height:600px;
display: block;
border:1px solid #ccc;
margin:20px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(300,150);
context.lineWidth=1;
context.strokeStyle="#058";
context.stroke();
}
</script>
</body>
</html>
在浏览器中的显示结果如下：
image.png
网友评论