为什么我的画出来以后线条不在左上方？而是在下方
来源：2-2 简述Canvas
慕仔2092093
2017-05-16 10:08:04
<!DOCTYPE html>
<html>
<!--输入感叹号以后点击ctrl+alt键，出现html文档结构-->
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
canvas{
position: absolute;
width: 1024px;
height: 768px;
background: #abcdef;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<script type="text/javascript">
window.onload=function () {
// body...
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.moveTo(100,100);
context.lineTo(200,200);
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
</body>
</html>
3回答
-
小丸子爱吃菜
2017-05-16
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：在css中为canvas定义宽高，实际上把画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。
所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
<canvas id="canvas" width="500px" height="500px">您的浏览器不支持canvas</canvas>
祝学习愉快！
0 -
慕仔2092093
提问者
2017-05-16
绝对定位定的是画布的位置吧，跟线条没有关系吧
0 -
悠悠辛池
2017-05-16
因为你对canvas写了绝对定位position: absolute;和设定了它的宽高
0
相似问题