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. JavaScript学习总结（八）正则表达式

    转自:http://segmentfault.com/a/1190000000699097 基本概念 正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”) ...

  2. python djangjo 文件上传

    视图: request.GET 获取数据 request.POST   提交数据 request.FILES  获取文件用 checkbox 等多选的内容   request.POST.getlist ...

  3. file / from install of XXX conflicts with file from package filesystem-XXX

    在centos上安装一个偏门软件时出现如下问题: rpm -ivh mNetAssist-0.1.1-2.x86_64.rpm #执行命令 file / from install of XXX con ...

  4. 为什么就连iPhone、三星手机的电池都能出问题？

    近年来关于三星.苹果.华为等知名手机厂商电池爆炸的消息一直不断在媒体上报道.这在一定程度上引发了消费者的重度忧虑,也给这些知名手机厂商从一定程度上造成了信任危机.为何连这些知名品牌都无法避免手机电池的 ...

  5. TableViewComponent v2

    Unity UGUI 自带的 ScrollView 控件不支持复用滚动内容,在数量大的情况下,界面容易卡顿 借鉴其他游戏控件,写了个可复用的滚动组件,扩展.优化了ScrollView TableVie ...

  6. RocketMQ集群平滑下线或重启某个节点

    1.现状描述 集群其中一台物理机未知原因导致单用户无法登陆机器,该物理机需要重启修改密码或者重装系统.该台为master节点,运行正常.配置策略为: 异步刷盘 主从异步复制 如果直接下线该master ...

  7. elasicsearch数据自动清理脚本

    elasticsearch随着保存的数据越来越多,磁盘占用越来越大,有必要进行定期自动清理. 直接上脚本 cat es-index-clear.sh #/bin/bash #查看索引信息 #curl ...

  8. java23种设计模式 (转)

    文章在:http://www.cnblogs.com/maowang1991/archive/2013/04/15/3023236.html 随着自己的开发经验增加以及自己做了很多的 大专栏  jav ...

  9. Js对于数组去重提高效率一些心得

    最近在找工作,好几次面试都问过数组去重的问题.虽然问的都不一样,但是核心思想是没有变的. 第一种是比较常规的方法 思路: 构建一个新的数组存放结果 for循环中每次从原数组中取出一个元素,用这个元素循 ...

  10. coreseek 在gcc 4.9+ 上编译不通过 [sphinxexpr.o] Error 1 错误解决方案

    这几天玩hhvm,把gcc环境都装到4.9了,然后编译coreseek的时候就出问题,google一大圈,貌似捕风捉影看到一些信息说是gcc4.7+的c++作用域必须用this->去引用,这里整 ...