分类：Html5

Html5 画布 Canvas 太极图

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>画布（Canvas）-太极图 测试</title>  
</head>  
<body>
  <h2>画布（Canvas）-太极图 测试</h2>  
    <canvas id="miCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
  <script type="text/javascript">
    var c = document.getElementById("miCanvas");
    var ctx = c.getContext("2d");
    
    //1、先绘制一个完整的空心圆
    ctx.beginPath();
    //arc(x,y,r,start,stop)
    ctx.arc(300, 300, 200, 0, Math.PI*2);
    ctx.stroke();

    //2、绘制半黑半白。从1.5PI至0.5PI顺时针填充，默认为黑色。
    ctx.beginPath();
    //arc(x,y,r,sAngle,eAngle,counterclockwise);
    //x	圆的中心的 x 坐标。
    //y	圆的中心的 y 坐标。
    //r	圆的半径。
    //sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
    //eAngle	结束角，以弧度计。
    //counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
    ctx.arc(300, 300, 200, Math.PI*1.5, Math.PI*0.5, false);
    ctx.fill();

    //3、绘制一黑一白两个半圆
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(300, 200, 100, 0, Math.PI*2);
    ctx.fill();

    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(300, 400, 100, 0, Math.PI*2);
    ctx.fill();

    //4、绘制两个小圆
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(300, 200, 30, 0, Math.PI*2);
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(300, 400, 30, 0, Math.PI*2);
    ctx.fill();


    // 设置文字
    ctx.fillStyle = "black";
    ctx.font = "60px Arial";
    //fillText(text,x,y) 在 canvas 上绘制实心的文本
    //strokeText(text,x,y) 在 canvas 上绘制空心的文本
    ctx.fillText("离", 275, 75);
    ctx.fillText("坎", 275, 565);
    ctx.fillText("震", 30, 300);
    ctx.fillText("兑", 515, 300);
  </script>
</body>
</html>


//arc(x,y,r,start,stop)
//arc(x,y,r,sAngle,eAngle,counterclockwise);
//x 圆的中心的 x 坐标。
//y 圆的中心的 y 坐标。
//r 圆的半径。
//sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
//eAngle 结束角，以弧度计。
//counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
阅读全文

Html5 进度条 progress

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>进度条（progress）测试</title>  
</head>  
<body>
  <h2>进度条（progress）测试</h2>
  <progress value="0" max="100">您的浏览器不支持 HTML5 progress 标签</progress><p>
    <input type="button" value="开始" onclick="startProgress()"/>
  <script type="text/javascript">
    function startProgress(){
          var bar = document.getElementsByTagName("progress")[0];
          execProgress(bar, 0);
      }
      function execProgress(bar, value){
          var value = value+1;
          bar.value = value;
          if (value < 100) {
              setTimeout(function(){execProgress(bar, value);}, 30)
          }else{
              setTimeout(function(){alert("完成")}, 30);
          }
      }
  </script>
</body>
</html>

Html5 SVG 可伸缩矢量图形 Scalable Vector Graphics

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>SVG 可伸缩矢量图形 Scalable Vector Graphics</title>  
</head>  
<body>
<svg width="200" height="200">
     <rect x="50" y="20" width="150" height="50" stroke="blue" fill="red"></rect>
     <circle cx="120" cy="80" r="40" stroke="black" fill="none" stroke-width="5"></circle>>
 </svg>
</body>
</html>

Html5 画布 Canvas

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>画布（Canvas）测试</title>  
</head>  
<body>
  <h2>画布（Canvas）测试</h2>  
    <canvas id="miCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
  <script type="text/javascript">
    var c = document.getElementById("miCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    // 画圆
    // arc(x,y,r,start,stop)
    ctx.arc(100, 50, 30, 0, 2*Math.PI);
    ctx.stroke();

    // 文本
    ctx.font = "30px Arial";
    // fillText(text,x,y)
        ctx.fillText("hi, jzh", 10, 50);
  </script>
</body>
</html>

Html5 拖放 Drag Drop

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>拖放（Drag 和 Drop）测试</title>  
  <style type="text/css">
        #div1, #div2 {float:left; width:240px; height:100px; margin:5px; padding:5px; border:1px solid #000000;}
    </style>
</head>  
<body>
  <h2>拖放（Drag 和 Drop）测试</h2>  
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="http://chanpinxue.cn/wp-content/uploads/2018/10/logo-2.png" draggable="true" ondragstart="drag(event)" id="drag1" width="240" height="100"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <script type="text/javascript">
    function allowDrop(ev)
    {
      ev.preventDefault();
    }

    function drag(ev)
    {
      ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
    }
  </script>
</body>
</html>

Html5 输入框的自动下拉提示 datalist

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>datalist</title>  
</head>  
<body>
  <p>
  输入框的自动下拉提示：<input list="words">
  </p>
  <datalist id="words">
    <option value="a">
    <option value="b">
    <option value="c">
    <option value="d">
    <option value="e">
  </datalist>
</body>
</html>

关于Java Tomcat和Html5实现WebSocket

1、Java8+Tomcat8。

package com.ssm.cts.websocket;

import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.RemoteEndpoint;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import org.apache.log4j.Logger;

import java.nio.*;
import java.util.*;

/**
 * CopyRright (c)2018-2028: chanpinxue.cn 
 * Project: cts 
 * Module Name: CtsWebSocket
 * Comments: WebSocket服务端
 * JDK version used: JDK1.8 
 * Author: jzh 
 * Create Date: 2018-11-04
 * Modified By: jzh 
 * Modified Date: 2018-11-04
 * Why & What is modified:
 * Version: <1.0>
 */
// 注解@ServerEndpoint表示它是一个WebSocket服务端
@ServerEndpoint(value="/ctsWebSocket")
public class CtsWebSocket {
  protected final Logger logger = Logger.getLogger(CtsWebSocket.class);
  static List<Session> clientList = Collections.synchronizedList(new ArrayList<Session>());

  // 注解@OnOpen表示它在客户端连接时发生
  @OnOpen
  public void start(Session session) {
    // 每当有客户端连接进来时，收集该客户对应的session
    clientList.add(session);
    logger.info("客户端连接：" + session.getBasicRemote());
  }

  // 注解@OnMessage表示它在客户端消息到达时发生
  @OnMessage
  public void message(String message, Session session) throws Exception {
    // 收到消息后，将消息向所有客户发送一次
    logger.info("客户端消息：" + message);
    for (Session s : clientList) {
      RemoteEndpoint.Basic remote = s.getBasicRemote();
      remote.sendText(message);
    }
  }

  // 注解@OnClose表示它在客户端连接关闭时发生
  @OnClose
  public void end(Session session, CloseReason closeReason) {
    // 每当有客户连接关闭时，删除该客户对应的session
    clientList.remove(session);
  }

  // 注解@OnError表示它在客户端出错时发生
  @OnError
  public void error(Session session, Throwable throwable) {
    // 每当有客户连接出错时，删除该客户对应的session
    clientList.remove(session);
  }
}

2、websocket.html 阅读全文

Html5 localStorage本地存储

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Storage测试</title>  
</head>  
<body>
  <h2>Storage测试</h2>  
  <input type="text" id="save"/>
  <div id="show"></div>
  <input type="button" value="保存数据" onclick="saveStorage('save');"/> 
  <input type="button" value="读取数据" onclick="loadStorage('show');"/>
  <script type="text/javascript">
    var saveStorage = function(id)
    {
      var target = document.getElementById(id);
      // 保存数据
      localStorage["message"] = target.value;
    }
    var loadStorage = function(id)
    {
      var target = document.getElementById(id);
      // 读取数据
      target.innerHTML = localStorage["message"];
    }
  </script>
</body>
</html>