以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在<style>里，看看会有什么不同。自己试了以下，果然有问题。
) @$ A2 g. O# Z6 H5 a8 `0 R G# _先看一下代码：
5 { Y; o. E8 \& x+ k2 S: E; `代码如下:
1 V/ l4 [$ M: D: p0 r+ b* O3 ~<!doctype html>: a& U4 |8 |5 c, R( F* N
<html>
$ G' c' q5 E+ g* n6 _) d# u<head>3 \/ [- }8 V y
<meta charset=utf-8>) a0 m) _5 z8 @3 ?0 h# R
<title>canvas</title>
& @; U( I. a" {4 z* ^0 I: t* n<meta name=keywords content=>2 f. `6 N4 \. O' F+ j+ V
<meta name=author>
$ X9 L/ Z6 a5 h* ?% a1 d<style type=text/css>* _4 h3 {) p3 i+ C
body{margin:0;}+ _9 b9 @2 C/ p4 A, v! B
canvas{margin:20px;5 W% B8 c3 l/ u2 s6 G
/*width: 400px;
7 a2 [5 Z$ e( r f( Hheight: 300px;*/
5 n0 y" S" [2 q/ K% h6 q( y* Z}$ [/ X8 E8 J$ @1 E1 V0 X8 i2 m1 \
</style>1 I; |+ m$ C( d5 g5 @, q1 f
</head>
7 q: x/ t. p6 L: R- ?' r1 U# L: B<body onload=draw()>
: ~* ^% `# E% J, y<canvas id=canvas width=400 height=300 style=border:1px solid #f00;></canvas># |/ j. W" U/ c
<script>0 F2 w) ?/ N! k C7 ~5 V8 a
function draw() {
/ e' R' d, h% O( hvar canvas=document.getelementbyid('canvas');6 C; H. V- O- A& D5 R
var context=canvas.getcontext('2d');
+ w! a; q# ]7 ]: {8 Z+ [1 tcontext.beginpath();( ~% k, f9 q7 S
context.moveto(20,20);" }0 M; C/ ]; {, B
context.lineto(200,100);6 K0 \ ~; E f
context.linewidth=5;
4 d# X# x7 v* J3 n2 l scontext.stroke();
1 O3 C) R6 p9 K' Z/ D}
# a; x: T0 t* b- E. N; F( F+ l</script>. f0 X% g# d7 Y3 `' ~; J( z0 o
</body>$ U0 Q- Y. X+ p+ P C# S* f
</html>
$ t$ L& ^! R2 v( V% Q1 K+ G+ S1.宽：400；高：300；直接写在<canvas>里的效果：
`. g/ M" J5 ~1 a) W名单5 k' O c* j/ `$ X
2、删除<canvas>里的宽高，宽：400；高：300；写在<style>里的效果：
' K# r; O C f! p名单19 x6 ?4 ?3 l9 k. Q6 B
为什么两者的效果会不一样呢？" X. N+ v/ n& ~' t8 _% U, E. k( s
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
1 V6 y# `$ U# j, h
& f3 A6 H! l( N+ J9 C1 e, o更多网页制作信息请查看： 网页制作 |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
