视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]rect方法创建矩形

时间:2017-06-18 17:22酷播
rect() 方法创建矩形。但它并不会真正将矩形画出，只能调用stroke() 或 fill()后才会真正作用于画布。下面的例子将展示这一特性。

rect() 方法创建矩形。但它并不会真正将矩形画出，只能调用stroke() 或 fill()后才会真正作用于画布。下面的例子将展示这一特性。

  1. <html> 
  2.  
  3. <head> 
  4.  
  5. <title>HTML 5 Canvas rect</title> 
  6.  
  7. </head> 
  8.  
  9. <body> 
  10.  
  11. <canvas id="c" width="400" height="300"></canvas> 
  12.  
  13. </body> 
  14.  
  15. <script type="text/javascript"> 
  16.  
  17. var c = document.getElementById('c'); 
  18.  
  19. var cctx = c.getContext('2d'); 
  20.  
  21. // draw rectangle via strokeRect() method 
  22.  
  23. ctx.rect(0, 0, 100, 100); 
  24.  
  25.  
  26. //set time out, the rectngle will be drawed out after 5 secs. 
  27.  
  28. setTimeout(function () { ctx.stroke() }, 5000) 
  29.  
  30. </script> 
  31.  
  32. </html> 

虽然执行了rect(),但只有5秒后执行了stroke()后，画布上才会出现矩形图案。

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器