`

HTML5 Canvas 的初试

阅读更多
   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
分享到:
评论
4 楼 crane.ding 2011-01-02  
moonzhao 写道
请问能否提供一下:http://canvasdemo.appspot.com/,这个的,demo的代码,我想学习一下。仅仅是学习
多谢了。
我的邮箱是kb8reebok@sina.com


呵呵 该demo是我自己用GWT(Google Web ToolKit)封装了js来开发的,其底层也是js,不知对你是否适用,如果你要学习canvas,我可以提供一些学习资料!
3 楼 LoriSun 2010-12-19  
mydev.cn 写道
html5还是很牛×的,不过的IE配合啊。

IE 就配合的很好, 呵呵.
2 楼 mydev.cn 2010-12-07  
html5还是很牛×的,不过的IE配合啊。
1 楼 moonzhao 2010-12-06  
请问能否提供一下:http://canvasdemo.appspot.com/,这个的,demo的代码,我想学习一下。仅仅是学习
多谢了。
我的邮箱是kb8reebok@sina.com

相关推荐

    HTML5 Canvas核心技术源码技术代码

    HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...

    html5 canvas飘洒的星星特效

    html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...

    HTML 5 Canvas基础教程 源码+PDF

    《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...

    html5canvas播放视频

    HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...

    HTML5Canvas基础教程

    资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...

    HTML5 Canvas核心技术代码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...

    html5 canvas 图片压缩

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图像处理,包括绘制、修改和操作图像。在HTML5 Canvas中,我们可以通过JavaScript API实现图片的压缩功能,这对于优化网页性能,尤其是处理...

    《HTML5 Canvas 开发详解》第二版pdf

    《HTML5 Canvas 开发详解》第二版pdf 版

    HTML5 canvas仿屏保动态管道

    HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...

    HTML5 CanvasAPI

    HTML5 Canvas API 是一项强大的技术,它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比,Canvas API 提供了一种更为灵活和强大的渲染系统,可以动态生成内容,并且能够很好地处理用户...

    html5 canvas 游戏

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...

    html5 canvas.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...

    HTML 5 CANVAS游戏开发实战

    标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...

    HTML5 Canvas核心技术 图形、动画与游戏开发电子书

    HTML5 Canvas核心技术 图形、动画与游戏开发

    HTML5 canvas绘制流程图

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...

    HTML5 Canvas核心技术.pdf

    HTML5 Canvas是现代网页开发中一种极为重要的图形绘制技术。它允许在网页上绘制图形,通过JavaScript控制图形的绘制细节,让网页不仅仅局限于展示静态内容,而是可以实现动态的、交互式的图形绘制。本书名为“HTML5 ...

    HTML5 Canvas一群鸟空中盘旋动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,无需依赖任何插件。"HTML5 Canvas一群鸟空中盘旋动画特效"是一个利用Canvas API实现的交互式动画示例,其核心是通过JavaScript编程...

Global site tag (gtag.js) - Google Analytics