<!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. git 秘钥的生成

    在命令查看自己的秘钥还是公钥 cat .ssh/id_rsa.pub/cat .ssh/id_rsa

  2. 在Visual Studio中使用Pseudovariables来帮助调试

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在Visual Studio中使用Pseudovariables来帮助调试.

  3. Nodejs实现代理服务器配置

    var net = require('net'); var local_port = 8893; //在本地创建一个server监听本地local_port端口 net.createServer(fu ...

  4. iOS CoreData（2）

    上面一篇文章介绍了coredata的有关基本概念,由于大部分是参考别人文章中的内容,所以感觉有点虚,而且估计也是比较难以理解,下面这篇文章通俗一点说说学习coredata后的一些理解,然后给出一个简单 ...

  5. spring junit 做单元测试，报 Failed to load ApplicationContext 错误

    spring junit 做单元测试,报 Failed to load ApplicationContext 错误. 查找了好一会,最后发现.@ContextConfiguration(locatio ...

  6. Geogebra里给带有曲线和直线混合边界的封闭区域填充颜色

    目的 用Geogebra绘制如图所看到的曲线,并填充如图边界的区域为实心: 用代码实现当然是能够的,可是,图形过于简单的时候用代码就不经济了.由于每个细小变动都还要调整改动代码并预览,非所见即所得.往 ...

  7. vs目录(继承的值)配置

    突然间,想在vs中添加自己的目录,这样以后再新建项目后,就不用再麻烦的手动添加了,比如让新建的项目都继承我的目录D:\MyInc. 事例:让新建的工程包含的目录中自动继承目录D:\MyInc 修改它的 ...

  8. DTrace patch for Python 2.7.x and 3.x

    DTrace patch for Python 2.7.x and 3.x Última Actualización: 21 de septiembre de 2015 https://www.jce ...

  9. Android 读取手机短信

    获取android手机短信需要在AndroidManifest.xml加权限: <uses-permission android:name="android.permission.RE ...

  10. 关于Bufferedreader的功能扩写

    package cn.hncu.pattern.decorator.v1; import java.io.FileReader;import java.io.IOException; public c ...