<!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. Java开发中常见的危险信号（中）

    本文来源于我在InfoQ中文站原创的文章,原文地址是:http://www.infoq.com/cn/news/2013/12/common-red-flags-in-java-1 Dustin Ma ...

  2. SPOJ 3273 - Order statistic set ， Treap

    点击打开链接 题意: 集合S支持一下四种操作:   INSERT(S,x) :   假设S中没有x,则插入x DELETE(S,x):  假设S中有x,则删除x K-TH(S):           ...

  3. 解决TortoiseCVS中文乱码

    解决TortoiseCVS中文乱码必备,解决方法: 第一:卸载和TortoiseCVS安装一起安装的CVSNT. 第二:安装本版本CVSNT. CVSNT下载地址:http://down.51cto. ...

  4. Smokeping 监控部署及配置

    安装参见: https://github.com/oetiker/SmokePing/blob/master/doc/smokeping_install.pod 1 Smokeping *** Gen ...

  5. Ganymed SSH-2 for Java

    Ganymed SSH-2 for Java是一个纯Java实现的SHH2库,官网为http://www.ganymed.ethz.ch/ssh2/,最新的更新时间为2006年10月,在用之前,请仔细 ...

  6. Spring-data-redis操作redis cluster

    Redis 3.X版本引入了集群的新特性,为了保证所开发系统的高可用性项目组决定引用Redis的集群特性.对于Redis数据访问的支持,目前主要有二种方式:一.以直接调用jedis来实现:二.使用sp ...

  7. js购物时的放大镜效果

    首先需要两张一样的图片,一张大图,一张小图,大图显示,当鼠标移入时,小图上出现一个滑块,可以滑动,大图也跟着显示,大图的显示区域和小图一样,当滑块滑到不同的位置,大图显示不同的区域,当鼠标移出时,滑块 ...

  8. CA 配置网站映射

     

  9. 用 SQL 计算时间差值

    ;WITH res1 AS ( SELECT * FROM ( SELECT ROW_NUMBER() OVER (PARTITION BY F2 ORDER BY F1) AS rn,F1,F2 F ...

  10. c语言对于文本的基本操作

    字符读写函数  :fgetc和fputc 字符串读写函数:fgets和fputs 数据块读写函数:freed和fwrite 格式化读写函数:fscanf和fprinf   1.字符读写: fgetc函 ...