<!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. 【三支火把】---C指针总结

    好久没写博客了,重新学习C语言了的基础课程,发现很多东西都忘记的差不多了,闲来无事,总结一下关于指针的知识,希望能帮到像我一样的菜鸟们: 指针,众所周知是C语言的精华所在,不懂指针的话,你就不要说你学 ...

  2. html页面一段时间自动跳转

    一.JS    <script> var flag = true; document.onmousemove = new Function("flag = false;" ...

  3. ASM集群文件系统ACFS（ASM Cluster File System）

    在11g R2中ASM文件支持包括数据文件,控制文件,归档日志文件,spfile,RMAN备份文件,Change Tracking文件,数据泵Dump文件盒OCR文件等.而推出的ACFS和Oracle ...

  4. Apache Mina 2.x 框架+源码分析

    源码下载 http://www.apache.org/dyn/closer.cgi/mina/mina/2.0.9/apache-mina-2.0.9-src.tar.gz 整体架构 核心过程(IoA ...

  5. 一个不喜欢读书的Javaer的读书单

    很可惜,从我一开始学技术开始,我就不喜欢看书,严重的时候翻不到两页就会开始狂打瞌睡.很幸运,有互联网能够为我提供很多知识,甚至一些知识从网上看来的会更加权威一些.但是,我的经验告诉我,无论是从功利性的 ...

  6. .Net程序猿玩转Android开发---(8)表格布局TableLayout

    表格布局TableLayout是Android中比較经常使用的一个布局控件,既然是表格,肯定有行和列,TableLayout中的行有TableRow组成.列依据每行控件的数量来确定 假如第一行有3个控 ...

  7. MySQL协议分析

    MySQL协议分析 标签: mysql 2015-02-27 10:22 1807人阅读 评论(1) 收藏 举报  分类: 数据库(19)    目录(?)[+]   1 交互过程 MySQL客户端与 ...

  8. c语言学习

    #include <stdio.h>void sum_diff(int *n1,int *n2,int *sum,int *diff){ *sum=*n1+*n2; *diff=(*n1& ...

  9. Media Player框架

    导入MediaPlayer.framework框架. //声明一个媒体播放器 var moviePlayer:MPMoviePlayerController? @IBAction func playM ...

  10. PHP克隆魔术方法

    克隆对象 __clone() $p2=clone $p; $p=>say(); 克隆对象的时候自动调用的方法 作用和构造方法一样是对新克隆的对象进行初始化 在这个方法中$this是副本所以可以给 ...