1.canvas鼠标画线，canvas小方块移动，canvas小方块旋转并缩放

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>绘制方块</title>

<style>

    body{background:#000;}

    #c1{background:#fff;}

    span{background:#fff;}

</style>

<script>

    window.onload = function(){

        var oC = document.getElementById('c1');

        var oGc = oC.getContext('2d');

        oGc.fillRect(0,0,100,100);

        var num = 0;

        setInterval(function(){

            num++;

            oGc.clearRect(0,0,oC.width,oC.height);

            oGc.fillRect(num,num,100,100);

        },30);

    };

</script>

</head>

<body>

<!--canvas 的宽高写在行间样式中是画布的大小，写在行间中就是等比缩放-->

<canvas id="c1" width="400" height="400">

    <span>不支持canvas</span>

</canvas>

</body>

</html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>小方块的缩放和旋转</title>

<style>

body{background:#000;}

#cl{background:#fff;}

span{background:#fff;}

</style>

<script>

    window.onload = function(){

        var oC = document.getElementById('cl');

        var oGc = oC.getContext('2d');

        var num = 0 ;

        var value = 1;

        var num2 = 0;

        setInterval(function(){

            num++;

            oGc.clearRect(0,0,oC.width,oC.height);

            oGc.save(); // 注意这个使用的地方，画布清掉的一开始就用

            if(num2 == 100){

                value = -1;

            }else if(num2 == 0){

                value = 1;

            }

            num2 += value;

            oGc.translate(100,100);

            oGc.rotate(num*Math.PI/180);

            oGc.scale(num2*1/50,num2*1/50);

            oGc.translate(-50,-50);

            oGc.fillRect(0,0,100,100);

            oGc.restore();

        },30);

    };

</script>

</head>

<body>

<canvas id="cl" width="400" height="400">

    <span>浏览器不支持canvas</span>

</canvas>

</body>

</html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    body{background:#000;}

    #c1{background:#fff;}

    span{background:#fff;}

</style>

<script>

    window.onload = function(){

        var oC = document.getElementById('c1');

        var oGc = oC.getContext('2d');

        oC.onmousedown = function(ev){

            var ev = ev || window.event;

            oGc.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

            oC.onmousemove = function(ev){

                var ev = ev || window.event;

                oGc.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

                oGc.stroke();

            };

            oC.onmouseup = function(){

                oC.onmousemove = oC.onmouseup = null;

            };

            return false;

        };

    };

</script>

</head>

<body>

<canvas id="c1" width="400" height="400">

    <span>不支持canvas</span>

</canvas>

</body>

</html>

html5 cavans的小应用的更多相关文章

  1. HTML5 的一些小的整理吧

    主要的就是一些HTML 5 API 的使用 也是借鉴别人的博客 ,和MDN(中文部分的还是能看的懂) 上面的一些东西 具体的代码在 有道云笔记里面也有. 先把总得列出来 1.Canvas绘图 学完这个 ...

  2. 通通的最后一篇博客（附自制html5平面射击小游戏一枚）

    这是我最后一篇博客了,由于本人的人生规划吧,以后应该也写不出什么好的技术文章了,到现在在博客园写了2年, 今天一看,我也有了120个粉丝,好几万的浏览量,感谢大家的支持啊~~ 半年没有写博客了,由于半 ...

  3. [HTML5实现人工智能]小游戏《井字棋》发布，据说IQ上200才能赢

    一,什么是TicTacToe(井字棋)   本 游戏 为在下用lufylegend开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿 ...

  4. 【HTML5游戏开发小技巧】RPG情景对话中，令文本逐字输出

    以前用JAVAscript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下.canvas里的内容可不像<p>那样好操作,首先,你需要懂得一些html5的API才能操 ...

  5. 【HTML5游戏开发小技巧】RPG情形对话中，令文本逐琢夸出

    从前用JAVAscript完成过令文本逐琢夸出的效果,明天嗡炒用html5中的canvas完成一下.canvas里的内容可没有像<p>那样好操做,起首,您需求懂得一些html5的API才气 ...

  6. JavaScript+HTML5 实现打地鼠小游戏

    一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaS ...

  7. 让所有的浏览器都能识别HTML5标签样式的小插件

    如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的 ...

  8. 初学HTML5做的小知识点

    新增的HTML5标签 语义化标签 :<header> 头标签      <nav> 导航标签      <section> 表示文档的结构.栏目      < ...

  9. html5 canvas 移动小方块

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. SpringMVC静态资源拦截的问题

    通常在web.xml中的核心控制器的DispatcherServlet中的url-pattern属性配置成类似“/”的拦截路径,但是会出现静态资源找不到的问题,比如js脚本.图片.css等无法加载,那 ...

  2. IO流文件拷贝

    目录 IO流文件拷贝 前言 字节流(使用FileInputStream和FileOutputStream读取每一个字节...) 字节流(使用FileInputStream和FileOutputStre ...

  3. Nginx笔记总结九:Nginx日志配置

    ngx_http_log_module用来定义请求日志格式1. access_log指令 语法:   access_log path [format [buffer=size [flush=time] ...

  4. 转：CentOS7 常用命令集合

      这两天一直在对CentOS 7.2进行初体验,各种学习命令肿么用,不过其实大多和DOS是一样的,只是命令的表达上可能有点儿不一样,毕竟这些都不是一家出来的嘛~ 废话不多说,直接上命令和解析! 常用 ...

  5. 监控Linux系统所选的服务所占进程内存占用

    [代码] #!/bin/bash #程序功能描述: # 监控系统所选的服务所占进程内存占用 #作者:孤舟点点 #版本:1.0 #创建时间:-- :: PATH=/bin:/sbin:/usr/bin: ...

  6. pandas入门（一）：pandas的安装和创建

    pandas 对于数据分析的人员来说都是必须熟悉的第三方库,pandas 在科学计算上有很大的优势,特别是对于数据分析人员来说,相当的重要.python中有了Numpy ,但是Numpy 还是比较数学 ...

  7. phaser2->3：来个打地鼠试水

    本文中phaser具体版本 phaser2:2.8.1 phaser3:3.17.0 一.实现效果二.实现细节三.项目总结四.参考文档 一.实现效果 源码地址(phaser2&phaser3) ...

  8. 谈谈从事IT测试行业的我，对于买房买车有什么样的感受

    周边测试同事,开发同事买?买?的比较多, 偶尔大家话题中也会谈起这个. 毕竟工作.衣.食.住.行和我们每个IT从业者息息相关, 大家有着相同或相似的感受与经验. - 前公司 以前公司测试经理 10年从 ...

  9. SQL语法练习(一)

    查询学习课程"python"比课程 "java" 成绩高的学生的学号;– 思路:– 获取所有有python课程的人(学号,成绩) - 临时表– 获取所有有jav ...

  10. 在虚拟机单机部署OpenStack Grizzly

    安装过程 安装Ubuntu 我手头有的是Ubuntu Server 12.04 64位版,就直接用了,默认安装即可,配置的时候很简单,如下 内存:1G 硬盘:20G 处理器:2 网络:NAT 装好以后 ...