Demo - 随机绘制圆环

实现思路：

  • 将一个圆环的绘制分成100份，setInterval()方法定义每隔时间n绘制一段新的，每份的开始路径都是上一次的结束路径，实现步进绘制。
  • 通过Math.random()，随机生成圆的坐标半径颜色。

实现方法：

  1. 定义画布和联系
  2. 设置步进属性
  3. 设置随机圆属性（5个参数：x，y，半径，开始，结束，方向）
  4. 循环执行绘画

<<index.html>>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style type="text/css">

    #canvas {

        border: 1px black solid;

    }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="400">您的浏览器不支持canvas</canvas>

    <input type="button" onclick="InitDraw()" value="draw">

    <script type="text/javascript">

    function InitDraw() {

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

        var ctx = canvas.getContext('2d');

        var ctx2 = canvas.getContext('2d');

        var step;

        // var sAngle;

        // var eAngle;

        var x, y, r;

        var add, stepTime, counterClockwise;

        // 步进属性

        step = 0;

        add = Math.PI * 2 / 100;

        stepTime = 20;

        // 随机圆属性

        sAngle = 0;

        eAngle = sAngle + add;

        counterClockwise = false;

        x = Math.random() * 800 + 100;

        y = Math.random() * 200 + 100;

        r = Math.random() * 50 + 50;

        ctx.strokeStyle = "#" + (Math.random() * 0x1000000 << 0).toString(16);

        ctx.shadowColor = "#" + (Math.random() * 0x1000000 << 0).toString(16);

        console.log(ctx.strokeStyle);

        console.log(ctx2.strokeStyle);

        ctx.lineWidth = 1.0;

        ctx.shadowOffsetX = 0;

        ctx.shadowOffsetY = 0;

        ctx.shadowBlur = 10;

        // 画圆

        var drawID = setInterval(Draw, stepTime);

        function Draw() {

            if (step < 100) {

                // 绘制路径并画

                ctx.beginPath();

                ctx.arc(x, y, r, sAngle, eAngle, counterClockwise);

                ctx.stroke();

                ctx.closePath();

                // 步进

                sAngle = eAngle;

                eAngle += add;

                // console.log("drawID:" + drawID + ",step:" + step);

                // console.log(ctx.strokeStyle);

                step++;

            } else {

                clearInterval(drawID);

            }

        }

    }

    </script>

</body>

</html>

在不同的变量环境下出现了不同的情况：

  1. 全局变量：step, sAngle, eAngle , x, y, r;

    在执行绘图过程中持续变化的参数是step,sAngle,eAngle,再次调用时回到函数InitDraw();重新定义六个全局变量以及画笔样式，则重新开始绘图。上一个step和画笔样式都停留在按下button的一刻

  2. 全局变量：sAngle, eAngle; 局部变量：var step, x, y, r;

    在控制台输出情况可以看到，当起始位置为全局变量时相互干扰的非常厉害，但因为step是局部变量，调用的是不同的副本，最后两个圈均执行到了99。并且可以看到控制台中drawID是间隔出现的，对两次setInterval方法轮流执行，也就造成了sAngle位置是跳跃的虚点。

  3. 局部变量：var step ,sAngle, eAngle, x, y, r;

    但要注意的是在该示例中共用同一个画布和联系(ctx)，在这里画笔的颜色和样式被刷新成为新的。那么应该如何在同一画布中同时绘画不同样式？

  4. 全局变量：step; 局部变量：var sAngle, eAngle, x, y, r;

    在第二次点击出现的圈绘到约半圈时停止

    点击button重新执行InitDraw();step=0; 从打印信息可以看到两个不同的setInterval方法对step变量相互干扰，直到step有机会到达99时停止绘图。

  5. ...一共64种变化，谨慎定义Canvas中的变量作用域

关于Context的另一个测试：

在同一个画布中调用获取两个Context，但通过输出可以看到每个画布只有一个对应的Context

经过几个Demo的分析得到以下结论：

  • 在调用同一个function时候，私有变量互不相干，会像C一样得到不同的副本各自存值
  • Canvas的Context样式（strokeStyle/shadowColor/...）是针对该Canvas（画布）唯一的
  • 如果同时调用setInterval方法，则轮流执行，1,2,1,2,1,2...以此类推
  • 谨慎使用setInterval方法，同时运行多个会导致相互干扰

遗留问题：

  • 如何同时绘画不同样式？

H5 Canvas | 画布中变量作用域与setInterval方法同步执行探究的更多相关文章

  1. 跨JavaScript对象作用域调用setInterval方法

    跨JavaScript对象作用域调用setInterval方法: var id = window.setInterval(function() {foofunc.call(this);}, 200);

  2. 控制器controller与指令中的link、controller中变量作用域的关系

    angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...

  3. JS中for循环变量作用域--解决for循环异步执行的问题

    被这个问题困惑了很久,终于在网上找到了答案,感谢~ 现在分享给大家~ js中如何让一个for循环走完之后,再去执行下面的语句? 这涉及for循环变量作用域的问题,js中作用域只有函数作用域和全局作用域 ...

  4. C/C++语言中变量作用域：局部变量，全局变量，文件级变量

    C/C++语言中的变量分为全局变量和局部变量. 这样的划分方式的根据是变量的可见范围或者叫做作用域. 1 局部变量 局部变量指的是定义在{}中的变量,其作用域也在这个范围内.尽管常见的局部变量都是定义 ...

  5. 关于Chrome和Opera中draw Image（）方法无法在canvas画布中绘制图片的问题

    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=d ...

  6. erlang中变量作用域

    http://erlangdisplay.iteye.com/blog/315452 _开头(包括_)在erlang可以是表明,这个变量可以存任意东西,就是我们常说的全匹配,_A一般来说就是表明这个东 ...

  7. Python3中变量作用域nonlocal的总结

    最近,在工作中踩到了一个关于Python3中nonlocal语句指定的变量作用域的坑.今天趁周六休息总结记录一下. 众所周知,Python中最常见的作用域定义如下:   但是,为了更加方便地在闭包函数 ...

  8. Django 模板中 变量 过滤器的使用方法

    一.变量       1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量.    2.使用dot(.)能够访问变量的属性    3.当模板引擎碰到dot的 ...

  9. Javascript中this作用域以及bind方法的重写

    这是一个最近遇到的笔试题,出于尊重,不会说出该公司的名字,源于自身比较少,笔试题是将bind方法用ES3重写,使用bind这个方法,导致一时半会懵了,只记得bind可以改变this的作用域. 作为查漏 ...

随机推荐

  1. 【容斥原理】【分解质因数】poj1091 跳蚤

    题意转化为求一个线性组合a1*x1+a2*x2+...+an*xn+m*xn+1=1在什么时候可以有解.(ai在1~m的范围内任取) 易得当且仅当gcd(a1,a2,...,an)=1时可能有解. 然 ...

  2. （原创）Stanford Machine Learning (by Andrew NG) --- (week 1) Linear Regression

    Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 在Linear Regression部分出现了一些新的名词,这些名 ...

  3. ES6 函数参数的默认值

    基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...

  4. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  5. CentOS 6.9下配置安装KVM

    注意:KVM一切安装和运行都是在root用户下完成的,并且只有root才能支持某些软件. 一.准备工作: 1.查看系统版本.内核版本 ##查看系统版本 # cat /etc/redhat-releas ...

  6. python实现多播数据的发送和接收

    在项目中,YS私有协议用到多播技术,在验证其安全特性时用到python去发送多播包,在此做个记录. 多播服务器用于向多播组发送多播数据包,其实现代码如下: #coding:utf-, import s ...

  7. simple_strtoul()

    //此函数有以下几点值得注意: //1.第一个参数中的const.一般在函数的形参中,如果我们只是希望调用者使用该参数,而不会去改变该参数 //     内容(一般是指针指向的内容),则可以声明为co ...

  8. 【mysql】新方法修改数据库密码以及解决--ERROR 1045 (28000)的问题

    之前 有写过一篇修改mysql数据库的密码的一篇随笔, 地址是:http://www.cnblogs.com/sxdcgaq8080/p/5667124.html 但是此次采用原本的老方法,出现了问题 ...

  9. 使用moment.js管理时间

    如果在nodejs下 npm install moment 引用模块: var moment = require('moment'); 用法: 当前时间:2015-11-07 18:00:51 mom ...

  10. Sqlserver__数据表排序记录和界面显示排序记录不一致的问题

    背景:     数据表中有编号为1-20的20条记录,有一个排序字段OrderIndex, 其中1/3为0,1/3为1,1/3为2   现象:     每次在sqlserver执行OrderIndex ...