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. MOOC（7）- case依赖、读取json配置文件进行多个接口请求-openpyxl读取excel（14）

    从excel中读取数据 # -*- coding: utf-8 -*- # @Time : 2020/2/12 17:23 # @File : do_excel_openpyxl_14.py # @A ...

  2. firefox上网慢

    由于Chromium浏览器,打字的时候经常会跳字母,所以就换了firefox浏览器,但是FF上网的时候特别慢,而且大部分时间是花费在解析域名上.因此到网上找了许多资料,最终解决方法如下. 1.安装dn ...

  3. phpStrom安装PHP_CodeSniffer检查代码规范

    为什么使用PHP_CodeSniffer 一个开发团队统一的编码风格,有助于他人对代码的理解和维护,对于大项目来说尤其重要. PHP_CodeSniffer是PEAR中的一个用PHP5写的用来检查嗅探 ...

  4. java 项目乱码解决（web.xml全局配置编码格式）

    <!-- 乱码解决 --> <filter> <filter-name>encodingFilter</filter-name> //过滤器名称 < ...

  5. App Store成绞肉机 让创业者止步

    Store成绞肉机 让创业者止步" title="App Store成绞肉机 让创业者止步"> 曾几何时,苹果App Store一直被称之为创业者的天堂.似乎只要灵 ...

  6. 使用Xshell进行vi编辑时，按下end、home和Delete不能使用，解决解决办法

    使用Xshell连接到Linux进行vi编辑时,进入编辑模式,按下end键,光标无法移到行位,home也不能到行首,其它的Delete键也是不能使用,如何解决? Xshell选项设置如下: 文件→属性 ...

  7. Python实现链表倒序（带头指针）

    class ListNode(object): def __init__(self, x): self.val = x self.next = None def reverseList(self, h ...

  8. RocketMQ介绍与实践

    一.RocketMQ介绍         1.相关术语名词 1.  NameSrv:是一个几乎无状态节点,可集群部署,节点之间无任何信息同步. 2.  Broker:分为Master与Slave,一个 ...

  9. 【转载】(String)、toString、String.valueOf的区别

    用于个人参考,查看请前往原地址http://blog.csdn.net/springk/article/details/6414017 问题讨论http://bbs.csdn.net/topics/2 ...

  10. Activity源码解析 - 读书笔记

    1. Activity启动 Activity是一个比较好的模板方法模式.在Android系统启动时,第一个启动的进程是zygote进程,然后由zygote启动SystemServer,再后就是启动AW ...