你的位置:首页 > 软件开发 > 网页设计 > [js高手之路] html5 canvas系列教程

[js高手之路] html5 canvas系列教程

发布时间:2017-09-25 16:00:27
canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持。你可以参考这个网站,查看c ...

canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持。你可以参考这个网站,查看canvas的支持性 通过选择器选择canvas元素 )

2,通过canvas获取他的上下文绘制环境( context )

3,结合javascript调用canvas的api进行图形绘制

认识canvas的属性:宽度与高度

canvas的默认宽度与高度:宽度:300,高度:150

 1 <script> 2  window.onload = function(){ 3   var oCanvas = document.querySelector( "#cv" ); 4   console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height ); 5  } 6 </script> 7 </head> 8 <body> 9  <canvas id="cv">你的浏览器不支持</canvas>10 </body>

为什么要知道canvas的宽度与高度呢? 因为在动画和绘图制作的过程中,经常需要重绘操作,而重绘操作需要获取canvas的宽度与高度.

注意:canvas的宽度与高度,只能通过行间属性或者js动态修改,不要通过样式去修改,否则获取到的宽度与高度不准

 1 <style> 2 #cv { 3  width:600px; 4  height:400px; 5 } 6 </style> 7 <script> 8  window.onload = function(){ 9   var oCanvas = document.querySelector( "#cv" );10   console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height );11  }12 </script>

通过样式修改canvas的宽度与高度分别为600px和400px,但是通过js通过获取到的却不是这个值,而是默认值。所以不要通过样式去修改,而应该通过设置行间属性或者js动态修改属性:

 1 <script> 2  window.onload = function(){ 3   var oCanvas = document.querySelector( "#cv" ); 4   console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height ); 5  } 6 </script> 7 </head> 8 <body> 9  <canvas id="cv" width="600" height="400">你的浏览器不支持</canvas>10 </body>

这样获取到的宽度与高度才是600px和400px.

canvas也可以通过js动态创建

 1 <script> 2  window.onload = function () { 3   var oCanvas = document.querySelector("#cv"); 4   console.log('canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height); 5  } 6 </script> 7 </head> 8 <body> 9 <script>10 ;(function () {11  var oCanvas = document.createElement("canvas");12  oCanvas.setAttribute('id', 'cv');13  oCanvas.width = '600';14  oCanvas.height = '400'15  document.body.appendChild(oCanvas);16 })();17 </script>18 </body>

原标题:[js高手之路] html5 canvas系列教程

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。