找回密码
 立即注册
查看: 2658|回复: 0

清晰的HTML5画布的代码

[复制链接]
发表于 2015-8-17 15:27:41 | 显示全部楼层 |阅读模式
如何清除HTML5画布的例子。
  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <style>
  5.       body {
  6.         margin: 0px;
  7.         padding: 0px;
  8.       }
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <canvas id="myCanvas" width="600" height="300"></canvas>
  13.       <div id="buttons">
  14.         <input type="button" id="clear" value="Clear the canvas">
  15.       </div>
  16.     <script>

  17.     var canvas = document.getElementById('myCanvas');
  18.     var ctx = canvas.getContext('2d');

  19.         ctx.fillStyle = 'red';
  20.         ctx.beginPath();
  21.         ctx.arc(300, 150, 50, 0 * Math.PI, 2 * Math.PI);
  22.         ctx.fill();
  23.         
  24.         var button = document.getElementById('clear');
  25.         
  26.         button.addEventListener('click', function() {
  27.             ctx.clearRect(0, 0, canvas.width, canvas.height);
  28.         }, false);
  29.         
  30.    </script>
  31.   </body>
  32. </html>   
复制代码


欢迎来到泰泽网:http://www.tizennet.com/ 泰泽论坛:http://bbs.tizennet.com/ 好没有内涵哦,快到设置中更改这个无聊的签名吧!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|泰泽应用|泰泽论坛|泰泽网|小黑屋|Archiver|手机版|泰泽邮箱|泰泽网 ( 蜀ICP备13024062号-1 )

GMT+8, 2024-11-24 02:44 , Processed in 0.054819 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表