您好,欢迎来到无锡中智培训学校电脑培训专业网!咨询电话:0510-82828991
分享到:
无锡中智职业培训学校七大校区就近上课:南禅寺校区、胜利门校区、河埒口校区、新区校区、恒隆校区、宜兴校区、江南校区

网页设计canvas在标签里直接定义宽高

时间:2014-12-21 13:44 作者:中智培训 点击:
  无锡中智培训老师分享,网页设计canvas在标签里直接定义宽高
  以前用canvas画图时,都是直接在canvas标签里直接写上宽高,没有问题,但也没有探究过为什么宽高要直接写在canvas标签里,先看一下代码:
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>canvas</title>
  <meta name="Keywords" content="">
  <meta name="author" content="@my_programmer">
  <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
  canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果。所以,在canvas绘图时,应该在canvas标签里直接定义宽高。
  推荐:网页设计css3选择器基本介绍
       网页设计CSS3动画效果回调处理

无锡中智教育 无锡电脑培训班 无锡网页设计培训 无锡平面设计培训
无锡市中智职业培训学校 无锡中智培训 专注电脑培训|网站地图
热线电话:400-8818-707 版权所有 无锡中智培训学校 WWW.WX68.COM Copyright ©2013 ALL Rights Reserved
备案号:渝ICP备09051384号-1
网站地图