BlogJava-Java,永远不敢言精通-随笔分类-HTML5http://www.blogjava.net/crazycoding/category/44079.htmlGod helps those who help themselves. zh-cnFri, 13 Sep 2013 06:20:24 GMTFri, 13 Sep 2013 06:20:24 GMT60使用HTML5开发在线白板1——HTML5 canvas基本绘画http://www.blogjava.net/crazycoding/archive/2013/09/13/404016.htmlYing-erYing-erFri, 13 Sep 2013 01:55:00 GMThttp://www.blogjava.net/crazycoding/archive/2013/09/13/404016.htmlhttp://www.blogjava.net/crazycoding/comments/404016.htmlhttp://www.blogjava.net/crazycoding/archive/2013/09/13/404016.html#Feedback0http://www.blogjava.net/crazycoding/comments/commentRss/404016.htmlhttp://www.blogjava.net/crazycoding/services/trackbacks/404016.html很简单，基本的html文件+js文件

html文件：
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas Paint</title>
        <style type="text/css">
        <!--
          #container { position: relative;}
          #imageView { border: 1px solid #000; }
        --></style>
  </head>
  <body>
    <div id="container">
      <canvas id="imageView" width="800" height="800">
      </canvas>
    </div>
    <script type="text/javascript" src="js/draw.js"></script>
  </body>
</html>

js文件：draw.js
var canvas;
var context;
var tool;

/**
 * called on window load.
 */
if(window.addEventListener){
    window.addEventListener('load',
            init(),
            false);
}

/**
 * init.
 */
function init(){
    /**
     * find the canvas element.
     */
    canvas = document.getElementById('imageView');
    if(!canvas){
        return;
    }
    if(!canvas.getContext){
        return;
    }

    /**
     * get the 2D canvas context.
     */
    context = canvas.getContext('2d');
    if(!context){
        return;
    }

    /**
     * pencil tool instance.
     */
    tool = new tool_pencil();

    /**
     * attach the mousedown, mousemove and mouseup event listeners.
     */
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
    
}

/**
 * This painting tool 
 * works like a drawing pencil 
 * which tracks the mouse movements.
 * 
 * @returns {tool_pencil}
 */
function tool_pencil(){
    var tool = this;
    this.started = false;

    /**
     * This is called when you start holding down the mouse button.
     * This starts the pencil drawing.
     */
    this.mousedown = function (ev){
        /**
         * when you click on the canvas and drag your mouse
         * the cursor will changes to a text-selection cursor
         * the "ev.preventDefault()" can prevent this.
         */
        ev.preventDefault();
        context.beginPath();
        context.moveTo(ev._x,ev._y);
        tool.started = true;
    };

    /**
     * This is called every time you move the mouse.
     * Obviously, it only draws if the tool.started state is set to true
     */
    this.mousemove = function (ev){
        if(tool.started){
            context.lineTo(ev._x,ev._y);
            context.stroke();
        }
    };

    /**
     * This is called when you release the mouse button.
     */
    this.mouseup = function (ev) {
        if(tool.started){
            tool.mousemove(ev);
            tool.started = false;
        }
    };
}

/**
 * general-purpose event handler.
 * determines the mouse position relative to the canvas element.
 * 
 * @param ev
 */
function ev_canvas(ev){
    var x,y;
    if(ev.offsetX || ev.offsetY == 0){
        ev._x = ev.offsetX;
        ev._y = ev.offsetY;
    }
    
    /**
     * call the event handler of the tool.
     */
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
}



Ying-er 2013-09-13 09:55 发表评论
]]>Html5.0 http://www.blogjava.net/crazycoding/archive/2010/02/28/314111.htmlYing-erYing-erSun, 28 Feb 2010 10:06:00 GMThttp://www.blogjava.net/crazycoding/archive/2010/02/28/314111.htmlhttp://www.blogjava.net/crazycoding/comments/314111.htmlhttp://www.blogjava.net/crazycoding/archive/2010/02/28/314111.html#Feedback0http://www.blogjava.net/crazycoding/comments/commentRss/314111.htmlhttp://www.blogjava.net/crazycoding/services/trackbacks/314111.html

W3C 在 2008年 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。

通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

按字母顺序排列

  • 4: 指示在 HTML 4.01 中是否定义了该元素
  • 5: 指示在 HTML 5 中是否定义了该元素

标签 描述 4 5
<!--...--> 定义注释。 4 5
<!DOCTYPE>  定义文档类型。 4 5
<a> 定义超链接。 4 5
<abbr> 定义缩写。 4 5
<acronym> 不支持。定义首字母缩写。 4  
<address> 定义地址元素。 4 5
<applet> 不支持。定义 applet。 4  
<area> 定义图像映射中的区域。 4 5
<article> 定义 article。   5
<aside> 定义页面内容之外的内容。   5
<audio> 定义声音内容。   5
<b> 定义粗体文本。 4 5
<base> 定义页面中所有链接的基准 URL。 4 5
<basefont> 不支持。请使用 CSS 代替。 4  
<bdo> 定义文本显示的方向。 4 5
<big> 不支持。定义大号文本。 4  
<blockquote> 定义长的引用。 4 5
<body> 定义 body 元素。 4 5
<br> 插入换行符。 4 5
<button> 定义按钮。 4 5
<canvas> 定义图形。   5
<caption> 定义表格标题。 4 5
<center> 不支持。定义居中的文本。 4  
<cite> 定义引用。 4 5
<code> 定义计算机代码文本。 4 5
<col> 定义表格列的属性。 4 5
<colgroup> 定义表格列的分组。 4 5
<command> 定义命令按钮。   5
<datagrid> 定义树列表 (tree-list) 中的数据。   5
<datalist> 定义下拉列表。   5
<datatemplate> 定义数据模板。   5
<dd> 定义定义的描述。 4 5
<del> 定义删除文本。 4 5
<details> 定义元素的细节。   5
<dialog> 定义对话（会话）。   5
<dir> 不支持。定义目录列表。 4  
<div> 定义文档中的一个部分。 4 5
<dfn> 定义定义项目。 4 5
<dl> 定义定义列表。 4 5
<dt> 定义定义的项目。 4 5
<em> 定义强调文本。 4 5
<embed> 定义外部交互内容或插件。   5
<event-source> 为服务器发送的事件定义目标。   5
<fieldset> 定义 fieldset。 4 5
<figure> 定义媒介内容的分组，以及它们的标题。   5
<font> 不赞成。定义文本的字体、尺寸和颜色。 4  
<footer> 定义 section 或 page 的页脚。   5
<form> 定义表单。 4 5
<frame> 不支持。定义子窗口（框架）。 4  
<frameset> 不支持。定义框架的集。 4  
<h1> to <h6> 定义标题 1 到标题 6。 4 5
<head> 定义关于文档的信息。 4 5
<header> 定义 section 或 page 的页眉。   5
<hr> 定义水平线。 4 5
<html> 定义 html 文档。 4 5
<i> 定义斜体文本。 4 5
<iframe> 定义行内的子窗口（框架）。 4 5
<img> 定义图像。 4 5
<input> 定义输入域。 4 5
<ins> 定义插入文本。 4 5
<isindex> 不支持。定义单行的输入域。 4  
<kbd> 定义键盘文本。 4 5
<label> 定义表单控件的标注。 4 5
<legend> 定义 fieldset 中的标题。 4 5
<li> 定义列表的项目。 4 5
<link> 定义资源引用。 4 5
<m> 定义有记号的文本。   5
<map> 定义图像映射。 4 5
<menu> 定义菜单列表。 4 5
<meta> 定义元信息。 4 5
<meter> 定义预定义范围内的度量。   5
<nav> 定义导航链接。   5
<nest> 定义数据模板中的嵌套点。   5
<noframes> 不支持。定义 noframe 部分。 4  
<noscript> 不支持。定义 noscript 部分。 4  
<object> 定义嵌入对象。 4 5
<ol> 定义有序列表。 4 5
<optgroup> 定义选项组。 4 5
<option> 定义下拉列表中的选项。 4 5
<output> 定义输出的一些类型。   5
<p> 定义段落。 4 5
<param> 为对象定义参数。 4 5
<pre> 定义预格式化文本。 4 5
<progress> 定义任何类型的任务的进度。   5
<q> 定义短的引用。 4 5
<rule> 为升级模板定义规则。   5
<s> 不支持。定义加删除线的文本。 4  
<samp> 定义样本计算机代码。 4 5
<script> 定义脚本。 4 5
<section> 定义 section。   5
<select> 定义可选列表。 4 5
<small> 不支持。定义小号文本。 4 5
<source> 定义媒介源。   5
<span> 定义文档中的 section。 4 5
<strike> 不支持。定义加删除线的文本。 4  
<strong> 定义强调文本。 4 5
<style> 定义样式定义。 4 5
<sub> 定义上标文本。 4 5
<sup> 定义下标文本。 4 5
<table> 定义表格。 4 5
<tbody> 定义表格的主体。 4 5
<td> 定义表格单元。 4 5
<textarea> 定义 textarea。 4 5
<tfoot> 定义表格的脚注。 4 5
<th> 定义表头。 4 5
<thead> 定义表头。 4 5
<time> 定义日期/时间。   5
<title> 定义文档的标题。 4 5
<tr> 定义表格行。 4 5
<tt> 不支持。定义打字机文本。 4  
<u> 不支持。定义下划线文本。 4  
<ul> 定义无序列表。 4 5
<var> 定义变量。 4 5
<video> 定义视频。   5
<xmp> 不支持。定义预格式文本。 4 5



Ying-er 2010-02-28 18:06 发表评论
]]>