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. 网页中常见返回HTTP状态码含义

    在日常网页浏览的过程中大家经常会碰到400,403,404,500,502等HTTP状态码,这些状态码对于一般用户来说出现什么都是一样的,反正就是页面打不开了,但是作为网站开发人员或者从事相关工作者认 ...

  2. 吴裕雄--python学习笔记：BeautifulSoup模块

    import re import requests from bs4 import BeautifulSoup req_obj = requests.get('https://www.baidu.co ...

  3. laravel-事件

    1.注册事件以及监听器 首先我们需要在 app/Providers/目录下的EventServiceProvider.php中注册事件监听器映射关系,如下: /** * The event liste ...

  4. （一）mybatis简易搭建

    mybatis(基础及其搭建) 声明:该文章及该分类中的内容均基于正在开发的项目和一本参考书(深入浅出MyBatis技术原理与实战    by 杨开振) 一.mybatis核心组件(简要介绍) Sql ...

  5. mabatis中的元素属性

    resultMap属性id 唯一标识type 返回类型extends 继承别的resultMap,可选关联其他标签id 设置主键使用,使用此标签配置映射关系(可能不止一个)result 一般属性的配置 ...

  6. 暑假集训第六周contest1

    51Nod - 1413 权势二进制 题意:就是讲给出一个数n,让你求最少由多少个像0,1,10,11......这样的二进制数相加构成:样例n=9就是由9个二进制1相加组成,我不懂比赛的时候我为什么 ...

  7. 基于seo的话 一个页面里的h1标签应该控制在多少个

    不能出现多个,一个页面只能出现一次,次数多了就会造成权重分散

  8. Socket.io 入门 - Renyi的博客

    Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用 详情 ...

  9. python自动化测试技术-Allure

    文末有源码 大部分人可能做的是爬虫和web,数据分析方面的工作,今天分享个在自动化测试领域python能做什么样的事情,比如下方,是用python+pytest+allure生成的精美自动化测试报告, ...

  10. Sed 实记 · laoless's Blog

    sed编辑命令 p 打印匹配行 = 打印文件行号 a 在定位行之后追加文本 i 在定位行之前插入文本 d 删除定位行 c 用新文本替换定位文本 s 使用替换模式替换相应模式 r 从另一个文件读取文本 ...