WaterDrop

1、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<style type="text/css">

#div01
{
    width:800px;
    height:600px;
    background:url('lake02.jpg') no-repeat;
    background-size:100%;
}

</style>

<script type="text/javascript" >

    window.onload = function()
    {
    // http://www.365mini.com/page/html5-canvas-circle.htm
        //获取Canvas对象(画布)
        var canvas = document.getElementById("myCanvas");
        //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
        if(canvas.getContext)
        {  
            //获取对应的CanvasRenderingContext2D对象(画笔)
            var ctx = canvas.getContext("2d");  
            
            //ctx.lineWidth = 0.5;

            //开始一个新的绘制路径
            ctx.beginPath();
            //设置弧线的颜色为蓝色
            ctx.strokeStyle = "blue";
            var circle = {
                x : 100,    //圆心的x轴坐标值
                y : 100,    //圆心的y轴坐标值
                r : 50      //圆的半径
            };
            //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
            ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);    
            //按照指定的路径绘制弧线
            ctx.stroke();

        // http://www.w3school.com.cn/tags/canvas_clearrect.asp
            //ctx.clearRect(100, 100, 50, 50);
            //ctx.rect(100, 100, 50, 50);
            //ctx.stroke();
            ctx.clearRect(100, 100, 50, 50);

            //开始一个新的绘制路径
            ctx.beginPath();
            //设置弧线的颜色为蓝色
            ctx.strokeStyle = "blue";
            var circle01 = {
                x : 200,    //圆心的x轴坐标值
                y : 200,    //圆心的y轴坐标值
                r : 50      //圆的半径
            };
            //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
            ctx.arc(circle01.x, circle01.y, circle01.r, 0, Math.PI / 2, false);    
            //按照指定的路径绘制弧线
            ctx.stroke();
        }
    };

</script>

<div id="div01">
    <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签。
    </canvas>
</div>

</html>

 

 

2、

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html>
 4 
 5 <style type="text/css">
 6 </style>
 7 
 8 <script type="text/javascript" >
 9 
10     window.onload = function()
11     {
12         var autio = document.getElementById("idAutio");
13         autio.play();
14     };
15 
16     function AudioStart()
17     {
18         var autio = document.getElementById("idAutio");
19         autio.play();
20     }
21 
22     function AudioRestart()
23     {
24         var autio = document.getElementById("idAutio");
25         autio.currentTime = 0;//.stop();
26         autio.play();
27     }
28 
29 
30 </script>
31 
32 <!--
33 <audio controls="controls">
34 -->
35 <audio id="idAutio" controls="controls">
36     <source src="waterdrop.mp3" type="audio/mpeg">
37     Your browser does not support the audio tag.
38 </audio>
39 
40 
41 <br/>
42 <br/>
43 <input type="button" value="start" onclick="AudioStart()"/>&nbsp;<input type="button" value="restart" onclick="AudioRestart()"/>
44 
45 
46 </html>

 

 

3、

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html>
  4 
  5 <style type="text/css">
  6 
  7 #div01
  8 {
  9     width:800px;
 10     height:600px;
 11     background:url('lake02.jpg') no-repeat;
 12     background-size:100%;
 13 }
 14 
 15 </style>
 16 
 17 <script type="text/javascript" >
 18 
 19     var g_canvas = null;
 20     var g_ctx = null;
 21 
 22     window.onload = function()
 23     {
 24     // http://www.365mini.com/page/html5-canvas-circle.htm
 25         //获取Canvas对象(画布)
 26         g_canvas = document.getElementById("myCanvas");
 27         //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
 28         if(g_canvas.getContext)
 29         {  
 30             //获取对应的CanvasRenderingContext2D对象(画笔)
 31             g_ctx = g_canvas.getContext("2d");  
 32         }
 33 /*
 34         var circleInfo = new TcircleInfo();
 35         circleInfo.FiX = 200;
 36         circleInfo.FiY = 200;
 37         circleInfo.FiR = 100;
 38         circleInfo.FhInterval = setInterval("CircleChange("+circleInfo.FiCircleId+")", 500);
 39 */
 40         
 41 
 42     };
 43 
 44 
 45     function CircleChange(_iIdx)
 46     {
 47         var circleInfo = g_circle[_iIdx];
 48         circleInfo.FiR *= 1.5;
 49         circleInfo.FiItervalCnt ++;
 50         if (circleInfo.FiItervalCnt > g_iItervalCnt)
 51         {
 52         //    circleInfo.FiR = 50;
 53             clearInterval(circleInfo.FhInterval);
 54             delete g_circle[_iIdx];
 55             delete circleInfo;
 56         }
 57 
 58         DrawCircle();
 59     }
 60 
 61     var g_iCircleId = 0;
 62     var g_circle = {};
 63 
 64     var g_iParamR = 10;
 65     var g_iIterval = 400;
 66     var g_iItervalCnt = 10;
 67 
 68     function TcircleInfo()
 69     {
 70         this.FiCircleId = g_iCircleId;
 71         g_iCircleId ++;
 72         g_circle[this.FiCircleId] = this;
 73 
 74         this.FhInterval = null;
 75         this.FiItervalCnt = 0;
 76 
 77         this.FiX = 0;
 78         this.FiY = 0;
 79         this.FiR = 0;
 80 
 81         this.FstrLineWidth = "1";
 82         this.FstrStrokeStyle = "blue";
 83     }
 84 
 85 
 86     function DrawCircle()
 87     {
 88         if (! g_ctx)
 89             return;
 90 
 91         g_ctx.clearRect(0, 0, 800, 600);
 92 
 93         for (var i in g_circle)
 94         {
 95             g_ctx.beginPath();
 96 
 97             var circleInfo = g_circle[i];
 98             g_ctx.strokeStyle = circleInfo.FstrStrokeStyle;
 99             g_ctx.arc(circleInfo.FiX, circleInfo.FiY, circleInfo.FiR, 0, Math.PI * 2, false);
100             g_ctx.stroke();
101 
102             g_ctx.closePath();
103         }
104     }
105 
106 
107     function AudioRestart()
108     {
109         var autio = document.getElementById("idAutio");
110         autio.currentTime = 0;//.stop();
111         autio.play();
112     }
113 
114     function Click(_event)
115     {
116         console.log("_event : "+_event.clientX+" , "+_event.clientY);
117         AudioRestart();
118 
119         var circleInfo = new TcircleInfo();
120         circleInfo.FiX = _event.clientX - g_iParamR;
121         circleInfo.FiY = _event.clientY - g_iParamR;
122         circleInfo.FiR = g_iParamR;
123         circleInfo.FhInterval = setInterval("CircleChange("+circleInfo.FiCircleId+")", g_iIterval);
124     }
125 
126 </script>
127 
128 <audio id="idAutio">
129     <source src="waterdrop.mp3" type="audio/mpeg">
130     Your browser does not support the audio tag.<br/>
131 </audio>
132 
133 <div id="div01">
134     <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid red;" onclick="Click(event)">
135         您的浏览器不支持canvas标签。
136     </canvas>
137 </div>
138 
139 </html>

 

 

4、

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html>
  4 
  5 <style type="text/css">
  6 
  7 #div01
  8 {
  9     width:800px;
 10     height:600px;
 11     background:url('lake02.jpg') no-repeat;
 12     background-size:100%;
 13 }
 14 
 15 </style>
 16 
 17 <script type="text/javascript" >
 18 
 19     var g_canvas = null;
 20     var g_ctx = null;
 21 
 22     window.onload = function()
 23     {
 24     // http://www.365mini.com/page/html5-canvas-circle.htm
 25         //获取Canvas对象(画布)
 26         g_canvas = document.getElementById("myCanvas");
 27         //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
 28         if(g_canvas.getContext)
 29         {  
 30             //获取对应的CanvasRenderingContext2D对象(画笔)
 31             g_ctx = g_canvas.getContext("2d");  
 32         }
 33 /*
 34         var circleInfo = new TcircleInfo();
 35         circleInfo.FiX = 200;
 36         circleInfo.FiY = 200;
 37         circleInfo.FiR = 100;
 38         circleInfo.FhInterval = setInterval("CircleChange("+circleInfo.FiCircleId+")", 500);
 39 */
 40         
 41 
 42     };
 43 
 44 
 45     function CircleChange(_iIdx)
 46     {
 47         var circleInfo = g_circle[_iIdx];
 48         circleInfo.FiR *= 1.5;
 49         circleInfo.FiItervalCnt ++;
 50         if (circleInfo.FiItervalCnt > g_iItervalCnt)
 51         {
 52         //    circleInfo.FiR = 50;
 53             clearInterval(circleInfo.FhInterval);
 54             delete g_circle[_iIdx];
 55             delete circleInfo;
 56         }
 57 
 58         DrawCircle();
 59     }
 60 
 61     var g_iCircleId = 0;
 62     var g_circle = {};
 63 
 64     var g_iParamR = 10;
 65     var g_iIterval = 400;
 66     var g_iItervalCnt = 10;
 67 
 68     function TcircleInfo()
 69     {
 70         this.FiCircleId = g_iCircleId;
 71         g_iCircleId ++;
 72         g_circle[this.FiCircleId] = this;
 73 
 74         this.FhInterval = null;
 75         this.FiItervalCnt = 0;
 76 
 77         this.FiX = 0;
 78         this.FiY = 0;
 79         this.FiR = 0;
 80 
 81         this.FstrLineWidth = "1";
 82         this.FstrStrokeStyle = "blue";
 83     }
 84 
 85 
 86     function DrawCircle()
 87     {
 88         if (! g_ctx)
 89             return;
 90 
 91         g_ctx.clearRect(0, 0, 800, 600);
 92 
 93         for (var i in g_circle)
 94         {
 95             g_ctx.beginPath();
 96 
 97             var circleInfo = g_circle[i];
 98             g_ctx.strokeStyle = circleInfo.FstrStrokeStyle;
 99             g_ctx.arc(circleInfo.FiX, circleInfo.FiY, circleInfo.FiR, 0, Math.PI * 2, false);
100             g_ctx.stroke();
101 
102             g_ctx.closePath();
103         }
104     }
105 
106 
107     function AudioRestart()
108     {
109         var autio = document.getElementById("idAutio");
110         autio.currentTime = 0;//.stop();
111         autio.play();
112     }
113 
114     function Click(_event)
115     {
116         alert("Click");
117         console.log("Click : "+_event.clientX+" , "+_event.clientY);
118         AudioRestart();
119 
120         var circleInfo = new TcircleInfo();
121         circleInfo.FiX = _event.clientX - g_iParamR;
122         circleInfo.FiY = _event.clientY - g_iParamR;
123         circleInfo.FiR = g_iParamR;
124         circleInfo.FhInterval = setInterval("CircleChange("+circleInfo.FiCircleId+")", g_iIterval);
125     }
126 
127     function TouchStart(_event)
128     {
129         alert("TouchStart");
130         //console.log("_event : "+_event.clientX+" , "+_event.clientY);
131         AudioRestart();
132 
133         var targetTouches = _event.targetTouches;
134         var targetTouch = targetTouches[targetTouches.length-1];
135         console.log("TouchStart : "+targetTouch.pageX+" , "+targetTouch.pageY);
136 
137         var circleInfo = new TcircleInfo();
138         circleInfo.FiX = targetTouch.pageX - g_iParamR;
139         circleInfo.FiY = targetTouch.pageY - g_iParamR;
140         circleInfo.FiR = g_iParamR;
141         circleInfo.FhInterval = setInterval("CircleChange("+circleInfo.FiCircleId+")", g_iIterval);
142     }
143 
144 </script>
145 
146 <audio id="idAutio">
147     <source src="waterdrop.mp3" type="audio/mpeg">
148     Your browser does not support the audio tag.<br/>
149 </audio>
150 
151 <div id="div01">
152 <!--
153     <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid red;" onclick="Click(event)" touchstart="TouchStart(event)">
154     -->
155     <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid red;" touchstart="TouchStart(event)">
156         您的浏览器不支持canvas标签。
157     </canvas>
158 </div>
159 
160 </html>

 

 

5、

 

posted @ 2016-03-14 23:07  Html5Skill  阅读(516)  评论(0)  编辑  收藏  举报