canvas需要在标签里直接定义宽高
以前用canvas画图时,都是直接在canvas标签里直接写上宽高,没有问题,但也没有探究过为什么宽高要直接写在canvas标签里,因为各个资料的例子上都是这么写的。今天王sir提出了一个问题:如果把宽高写在<style>里,看看会有什么不同。自己试了以下,果然有问题。先看一下代码:
代码如下:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>canvas</title>
<meta name=keywords content=>
<meta name=author>
<style type=text/css>
body{margin:0;}
canvas{margin:20px;
/*width: 400px;
height: 300px;*/
}
</style>
</head>
<body onload=draw()>
<canvas id=canvas width=400 height=300 style=border:1px solid #f00;></canvas>
<script>
function draw() {
var canvas=document.getelementbyid('canvas');
var context=canvas.getcontext('2d');
context.beginpath();
context.moveto(20,20);
context.lineto(200,100);
context.linewidth=5;
context.stroke();
}
</script>
</body>
</html>
1.宽:400;高:300;直接写在<canvas>里的效果:
名单
2、删除<canvas>里的宽高,宽:400;高:300;写在<style>里的效果:
名单1
为什么两者的效果会不一样呢?
canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果。所以,在canvas绘图时,应该在canvas标签里直接定义宽高。
更多网页制作信息请查看: 网页制作 本人过去、现在以及将来都不认识楼主,且自古以来与楼主无利益关系。楼主表述之事与本人无关 哈哈~` 好久没有笑喽~ 呵呵~~~~你怎么老这样说~~~ 兄弟....表给偶丢丢哦.... 想骂你.却不知道从何骂起. 成长可以说已经是很幸福的了。但在另一方面,作者也不是温室里的花*,只能作些鸳鸯蝴蝶 的文章。在前面我已经说过了,这篇文章比形散神聚更胜一筹。诸位见过大风沙没有 这就是我斗胆的一点粗略分析,每天睡觉以前,我都会把您的帖子再三拜读,拜读。 什么什么啊?? 貌似我真的很笨????哎 还没崇拜过谁呢,满足一下愿望吧,谢谢! 为了不让帖子沉得太快!!!为了人人知道这个~!! 我不是原创~!!但是我要把他发扬广大~!!! 呵呵 大家好奇嘛 来观看下~~~~ 我也不知道了~~你把我问蒙了 呵呵 朕在自己的寝宫~~~~
页:
[1]
2