首页 新闻 赞助 找找看

用canvas 的 lineto方法画对角线,但画出来的图形不对?

0
悬赏园豆:10 [已解决问题] 解决于 2012-02-29 08:52

我的代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function drawDiagonal(){
var canvas=document.getElementById("diagonal");
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(
0,0);
context.lineTo(
200,200);
context.stroke();
}
window.onload
=drawDiagonal;
</script>
</head>
<body>
<canvas id="diagonal" style="border:1px solid;width:200px;height:200px;"></canvas>
</body>
</html>

画出来的图像如下:

为什么会这样呢?

tab_china的主页 tab_china | 初学一级 | 园豆:54
提问于:2012-02-28 16:01
< >
分享
最佳答案
0

在canvas中定义width、height跟在style中定义width和height是不同的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。所以代码改为这样就行了:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function drawDiagonal(){
var canvas=document.getElementById("diagonal");
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(
0,0);
context.lineTo(
200,200);
context.stroke();
}
window.onload
=drawDiagonal;
</script>
</head>
<body>
<canvas id="diagonal" style="border:1px solid;" width="200px" height="200px"></canvas>
</body>
</html>

另外,我们可以利用style的width和height来缩放canvas,下面我们把style中的width和height设置成canvas的width和height的两倍:

<canvas id="diagonal" style="border:1px solid;width:400px;height:400px;" width="200px" height="200px"></canvas>

运行后你会发现这个图是上面那个图的两倍大。

收获园豆:10
artwl | 专家六级 |园豆:16736 | 2012-02-28 17:54
其他回答(1)
0

楼上的回答是正解。我也遇到过这个问题。

喵酱-南京 | 园豆:202 (菜鸟二级) | 2013-08-20 17:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册