论坛首页 Web前端技术论坛

HTML5 Canvas 的初试

浏览 4250 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-04-19  
   HTML5 真的很强大,目前大多数的浏览器都支持了,就差IE了,前两个星期开始了解Canvas,真的很好很强大,HTML5在WEB开发方面真的是越来越快速了和方便了。
<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

效果图如下:

简单的几行代码就可以实现在界面画两个矩形,还支持透明;突然就想起弄个Demo来练练手,于是就自己用GWT做了一个简单的画图页面,网站地址是:http://canvasdemo.appspot.com/,有兴趣的朋友可以看看,本来想做多几个功能的,可没什么时间做,所有等以后有时间再慢慢完善。
界面如下图:

  • 大小: 38.9 KB
   发表时间:2010-12-06  
请问能否提供一下:http://canvasdemo.appspot.com/,这个的,demo的代码,我想学习一下。仅仅是学习
多谢了。
我的邮箱是kb8reebok@sina.com
0 请登录后投票
   发表时间:2010-12-07  
html5还是很牛×的,不过的IE配合啊。
0 请登录后投票
   发表时间:2010-12-19  
mydev.cn 写道
html5还是很牛×的,不过的IE配合啊。

IE 就配合的很好, 呵呵.
0 请登录后投票
   发表时间:2011-01-02  
moonzhao 写道
请问能否提供一下:http://canvasdemo.appspot.com/,这个的,demo的代码,我想学习一下。仅仅是学习
多谢了。
我的邮箱是kb8reebok@sina.com


呵呵 该demo是我自己用GWT(Google Web ToolKit)封装了js来开发的,其底层也是js,不知对你是否适用,如果你要学习canvas,我可以提供一些学习资料!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics