<!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异常处理一

    为什么需要异常处理? 郝斌解释:因为有些异常不能间接的利用if else来处理,比如说输入的时候,将键盘输入的内容转换为数字,此事如果用户输入非数字就会出现异常,而在用户输入之前是无法用程序判断用户所 ...

  2. mongodb 在windows上安装为服务

    // mongo 也是先安装扩展 在安装为服务 首先 先下载mongodb的压缩包 解压(一个bin文件夹 三个文件) 在目录下 新建立一文件夹 mongodb 然后将解压的内容放进去 然后在mong ...

  3. mac下apache启动关闭操作

    1.一般的命令如下: 2.但是这种方法在mac上有的时候不生效 3.根据上面的提示使用下面的方法,可以生效,mac上很多应用都可以采用这种方式启动.关闭应用 sudo launchctl load / ...

  4. 【三支火把】---队列和栈的C程序实现

    这几天总结了C语言的队列,栈的实现方法,在此总结一下:一.栈 首先从栈开始,诚然,相信学习过数据结构的你,肯定应该知道栈是什么东西了,如果不知道也没事每一句话我就可以帮你总结--数据只在栈顶进行插入和 ...

  5. C++ 运行时类型识别 知道实例父类类型，显示出子类类型

    typeid(nets_[i]).name() 其中的nets_[i]是一个对象

  6. mysql delete from

    delete a from #ta a  where exists (select 1 from #tb b where a.id=b.id)

  7. Android虚拟机Dalvik介绍

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

  8. oracle调优 浅析关联设计

    浅析关联设计 [范式] 比較理想的情况下,数据库中的不论什么一个表都会相应到现实生活中的一个对象,如球员是一个对象,球队是一个对象,赛程是一个对象,比赛结果又是一个对象等等,则就是范式. [关联设计] ...

  9. 浅谈android4.0开发之GridLayout布局

    作者:李响 本文重点讲述了自android4.0版本号后新增的GridLayout网格布局的一些基本内容,并在此基础上实现了一个简单的计算器布局框架.通过本文,您可以了解到一些android UI开发 ...

  10. java中synchronized使用方法

    synchronized的一个简单样例 public class TextThread { /**  * @param args  */ public static void main(String[ ...