<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #myCanvas{

                background-color: #fde;

            }

        </style>

    </head>

    <body>

        <canvas id="myCanvas" width="1000" height="500"></canvas>

    </body>

    <script type="text/javascript">

        var oc  = document.getElementById("myCanvas");

        var ctx = oc.getContext("2d");

        var isAdd ;

        var obj = {

            x : 50,

            y: 50,

            width : 200,

            height : 200

        }

        var num = 0

        function rotate(){

            ctx.save();

            if(num==200){

                isAdd = false;

            }

            if(num==0){

                isAdd = true;

            }

            if(isAdd){

                num++;

            }

            else{

                num--;

            }

            ctx.clearRect(0,0,500,500);

            ctx.fillStyle="blueviolet";

            ctx.translate(obj.x+(obj.width)/2,obj.y+(obj.height)/2);

            ctx.scale(num/100,num/100);

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

            ctx.translate(-(obj.x+(obj.width)/2),-(obj.y+(obj.height)/2))

            ctx.fillRect(obj.x,obj.y,obj.width,obj.height);

            ctx.restore();

        }

        setInterval(function(){

            rotate();

        },10);

    </script>

</html>

在Canvas中添加save（）和restore（）方法是因为Canvas的绘制实在上一个绘制图形之后继续绘制的（覆盖）。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            body{

                background: red;

            }

            #canvas{

                background: white;

                width: 400px;

                height: 400px;

            }

        </style>

    </head>

    <body>

        <!-- 默认canvas大小width300px，height150px -->

        <!-- 宽高必须在canvas标签的属性中设置，在css中写的话，是将canvas进行拉伸 -->

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

            <span>这是一个画布，请用ie10+浏览器查看，或者。。。。</span>

        </canvas>

        <input type="color" id="colorInput"/>

        <input type="number" id="numberInput" value="1"/>

        <script>

            //得到画布

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

            //得到canvas的上下文环境

            //目前只支持2d环境

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

            oC.onmousedown = function(ev){

                var colorInput = document.getElementById('colorInput');

                var numberInput = document.getElementById('numberInput');

                oGC.strokeStyle = colorInput.value;

                oGC.lineWidth = numberInput.value;

                oGC.beginPath();

                var ev = ev || window.event;

                //得到按下这个点相对于canvas的位置

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

                document.onmousemove = function(ev){

                    var ev = ev || window.event;

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

                    oGC.stroke();

                }

                document.onmouseup = function(){

                    oGC.closePath();

                    document.onmousemove = null;

                    document.onmouseup = null;

                }

            }

        </script>

    </body>

</html>

demo_06Canvas的更多相关文章

随机推荐

  1. 来试试这个来自静态代码分析工具PVS Studio提供C++的小测验吧

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:来试试这个来自静态代码分析工具PVS Studio提供C++的小测验吧.

  2. Windows平台Atom编辑器的常用快捷键小抄Cheat Sheet

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Windows平台Atom编辑器的常用快捷键小抄Cheat Sheet.

  3. Identity-第二章

    运用Asp.Net Identity 问题 解决方案 清单号 准备用户认证的应用程序 运用Authorize注解属性来限制对动作方法的访问,并定义一个对用户重定向的控制器,以便让用户提供凭据 1–4 ...

  4. 最火的Android开源项目（完结篇）

    65. AndroidSideMenu AndroidSideMenu能够让你轻而易举地创建侧滑菜单.需要注意的是,该项目自身并不提供任何创建菜单的工具,因此,开发者可以自由创建内部菜单. 66. A ...

  5. Android虚拟机Dalvik介绍

     Dalvik和标准Java虚拟机(JVM)之间的首要差别之一,就是Dalvik基于寄存器,而JVM基于栈.一直以来都有人在猜测,选择基于寄存器的方式是因为它对提前优化(ahead-of-time o ...

  6. jQuery Mobile方向感应事件

    在现在的智能手机中,都有对方向变换的自动感知功能,比如当手机方向从水平方向切换到垂直方向时,则会触发该事件.在jQuery Mobile中,可以通过orientationchange事件进行绑定,并且 ...

  7. [React Native] Up and Running

    We'll download the requirements for getting started with React Native, refactor our app to ES6, walk ...

  8. 在hadoop上进行编写mapreduce程序，统计关键词在text出现次数

    mapreduce的处理过程分为2个阶段,map阶段,和reduce阶段.在要求统计指定文件里的全部单词的出现次数时. map阶段把每一个关键词写到一行上以逗号进行分隔.并初始化数量为1(同样的单词h ...

  9. 读&lt;大数据日知录:架构与算法&gt;有感

    前一段时间, 一个老师建议我能够学学 '大数据' 和 '机器学习', 他说这必定是今后的热点, 学会了, 你就是香饽饽.在此之前, 我对大数据, 机器学习并没有非常深的认识, 总觉得它们是那么的缥缈, ...

  10. phpcms 源码分析一： common.inc.php

      其实就是从网上找到的的逆雪寒的分析, 我下来之后发现格式和错字的问题,非常影响阅读,现在我就是做了下搬运工的角色, 同时将格式调整到可读性提高点而已,让各位看官稍微舒心点: 下面进入整体: < ...