html5 canvas教程：掌握画直线图形的常用API(2)_H5之家

2，不同点，调用strokeRect和fillRect会立即绘制出矩形，而rect并不会，他需要调用stoke()或者fill()方法，才能把矩形绘制出来

1 <script> 2 window.onload = function(){ 3 var oCanvas = document.querySelector( "#canvas" ), 4 oGc = oCanvas.getContext( '2d' ); 5 6 oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )'; 7 oGc.rect( 50, 50, 500, 300 ); 8 // oGc.stroke(); 9 oGc.fill(); 10 } 11 </script> 12 </head> 13 <body> 14 <canvas id="canvas" width="600" height="400"></canvas> 15 </body> 清空矩形API：cxt.clearRect( x, y, width, height ); 参数跟strokeRect,fillRect意思一样 1 <script> 2 window.onload = function(){ 3 var oCanvas = document.querySelector( "#canvas" ), 4 oGc = oCanvas.getContext( '2d' ); 5 6 oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )'; 7 oGc.fillRect( 50, 50, 500, 300 ); 8 9 oGc.clearRect( 100, 100, 200, 200 ); 10 } 11 </script> 12 </head> 13 <body> 14 <canvas id="canvas" width="600" height="400"></canvas> 15 </body>

用fillRect和clearRect画一个加号，当然你可以用moveTo和lineTo,不过代码应该比这种方法多了不少.

1 <script> 2 window.onload = function(){ 3 var oCanvas = document.querySelector( "#canvas" ), 4 oGc = oCanvas.getContext( '2d' ); 5 6 oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )'; 7 oGc.fillRect( 100, 100, 200, 200 ); 8 oGc.clearRect( 100, 100, 50, 50 ); 9 oGc.clearRect( 250, 100, 50, 50 ); 10 oGc.clearRect( 250, 250, 50, 50 ); 11 oGc.clearRect( 100, 250, 50, 50 ); 12 } 13 </script> 14 </head> 15 <body> 16 <canvas id="canvas" width="400" height="400"></canvas> 17 </body>

分享给小伙伴们：

本文标签： html5，canvas，API/">html5，canvas，API

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻