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. LeetCode Day 6

    LeetCode0006 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" ,指定行数为 3 时,排 ...

  2. WPF中，如何屏蔽WebBrowser弹出的脚本错误窗口？

    WPF没有自带屏蔽这些窗口的方法或属性,可以使用反射的方法来屏蔽弹出脚本错误窗口: public void SuppressScriptErrors(WebBrowser wb, bool Hide) ...

  3. timber|stain|compensate|

    N-UNCOUNT 木材;原木;树木:林木Timber is wood that is used for building houses and making furniture. You can a ...

  4. jenkins使用（4）-发邮件

    邮箱配置 邮件触发器:达到条件就会发邮件 对单独的服务设置邮件 系统设置如下 回到单个任务的设置 配置中的主题设置如下: 回到单个任务的设置 配置中如下: 选择工作空间中的一个文件 发送多个附件: 邮 ...

  5. SpringMVC学习笔记六:类型转换器及类型转换异常处理

    SpringMVC内部有类型转换器,当从Request中获取参数后,放入Controller中时,会根据Controller中指定的类型进行自动转换,当指的类型SpringMVC不能自动转换时,就需要 ...

  6. 解析Maven的settings.xml文件

    一.镜像问题 1.为什么需要配置maven国内镜像? 在不配置镜像的情况下,maven默认会使用中央库.--https://repo.maven.apache.org/maven2 maven中央库在 ...

  7. spring提供的事务配置--纯注解

    spring提供的事务--纯注解 模拟转账业务  ,出错需要事务回滚,没错正常执行 事务和数据库技术都是spring的内置提供的 --------dao包--------------- IAccoun ...

  8. [VUE]关于路由哪些事儿

    什么是路由 之前有个小伙伴面试被问到:面试官:不用vue能不能写单页面应用?答:用angular啊(咳咳,开个玩笑),答案确实是可以的,原生js中有个事件叫做onhashchange,可以在windo ...

  9. linux vi命令详解及使用技巧

    进入vi的命令vi filename :打开或新建文档,并将光标置于第一行首vi +n filename :打开文档,并将光标置于第n行首vi + filename :打开文档,并将光标置于最后一行首 ...

  10. requests库入门-16-Session和Cookie

    分类专栏: Python接口自动化测试之requests库入门 作者 | Anthony_tester ,300w+访问量博主,Oracle测试开发工程师. 地址 | https://blog.csd ...