一共三个问题 ：

1、 change()函数是1秒钟执行一次，当中的console 语句也应该是每秒输出一次，但在本地执行发现，每次的console语句被执行情况

   为什么会这样

2、 怎样在每次画图之前清空之前的绘制结果， 现在的是直接绘制在之前的效果上的。

3、当setTimeout 这么写时 ，报错如下

找了很久都没发现问题出在哪里，为什么会这样的错误

这几个问题我想了很久都到底哪里出了问题 ，希望各位大神能够解答下我的疑惑。谢谢！

canvas 倒数计时

var HEIGHT = 500;

var WIDTH = 700;

var r = 4;

var R = 5;

var MARGIN_TOP = 30;

var MARGIN_LEFT = 20;

window.onload = function () {

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

var context = canvas.getContext("2d");

canvas.height = HEIGHT;

canvas.width = WIDTH;

var digit =

[

[

[0, 0, 1, 1, 1, 0, 0],

[0, 1, 1, 0, 1, 1, 0],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 1, 1, 0, 1, 1, 0],

[0, 0, 1, 1, 1, 0, 0]

],//0

[

[0, 0, 0, 1, 1, 0, 0],

[0, 1, 1, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[1, 1, 1, 1, 1, 1, 1]

],//1

[

[0, 1, 1, 1, 1, 1, 0],

[1, 1, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 1, 1, 0, 0, 0],

[0, 1, 1, 0, 0, 0, 0],

[1, 1, 0, 0, 0, 0, 0],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 1, 1, 1, 1, 1]

],//2

[

[1, 1, 1, 1, 1, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 1, 1, 1, 0, 0],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 1, 1, 1, 1, 1, 0]

],//3

[

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 1, 1, 1, 0],

[0, 0, 1, 1, 1, 1, 0],

[0, 1, 1, 0, 1, 1, 0],

[1, 1, 0, 0, 1, 1, 0],

[1, 1, 1, 1, 1, 1, 1],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 1, 1, 1, 1]

],//4

[

[1, 1, 1, 1, 1, 1, 1],

[1, 1, 0, 0, 0, 0, 0],

[1, 1, 0, 0, 0, 0, 0],

[1, 1, 1, 1, 1, 1, 0],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 1, 1, 1, 1, 1, 0]

],//5

[

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 1, 1, 0, 0, 0],

[0, 1, 1, 0, 0, 0, 0],

[1, 1, 0, 0, 0, 0, 0],

[1, 1, 0, 1, 1, 1, 0],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 1, 1, 1, 1, 1, 0]

],//6

[

[1, 1, 1, 1, 1, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 0, 1, 1, 0, 0, 0],

[0, 0, 1, 1, 0, 0, 0],

[0, 0, 1, 1, 0, 0, 0],

[0, 0, 1, 1, 0, 0, 0]

],//7

[

[0, 1, 1, 1, 1, 1, 0],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 1, 1, 1, 1, 1, 0],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 1, 1, 1, 1, 1, 0]

],//8

[

[0, 1, 1, 1, 1, 1, 0],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[1, 1, 0, 0, 0, 1, 1],

[0, 1, 1, 1, 0, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 0, 1, 1],

[0, 0, 0, 0, 1, 1, 0],

[0, 0, 0, 1, 1, 0, 0],

[0, 1, 1, 0, 0, 0, 0]

],//9

[

[0, 0, 0, 0],

[0, 0, 0, 0],

[0, 1, 1, 0],

[0, 1, 1, 0],

[0, 0, 0, 0],

[0, 0, 0, 0],

[0, 1, 1, 0],

[0, 1, 1, 0],

[0, 0, 0, 0],

[0, 0, 0, 0]

]//:

];

html canvas 随意画图,html5 canvas 画图的问题相关推荐

  1. html5 canvas绘制图形,html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  2. html5 canvas实际应用,Html5 Canvas入门及经典应用

    Html5 Canvas入门及经典应用 时间:2019-02-15     来源:华清远见 canvas想必对于前端的工程师都不陌生了,它是 HTML5 新增的「画布」元素,是HTML5 的一大亮点, ...

  3. html5 canvas获取坐标,HTML5 canvas坐标

    在canvas当中有一个特殊的东西叫做"坐标"!没错,就是平时所熟知的坐标体系.canvas拥有自己的坐标体系,从最上角0, 0开始,X向右是增大,Y向下是增大.也可以借助CSS当 ...

  4. html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环

    前段时间的一个项目做到这个玩意,研究了一下绘制圆环的方法.最终使用HTML5的画布标签来做.arc()是HTML5 Canvas的一个API函数,作用是"创建弧/曲线(用于创建圆形或部分圆) ...

  5. html5的canvas动画效果,HTML5 Canvas：制作动画特效

    要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...

  6. html5 canvas 取消锯齿,HTML5 Canvas 如何取消反锯齿绘图

    一.问题的提出 我们都知道反锯齿(anti-aliasing)绘图给我们带来更好的视觉体验,有了这个技术,绘制的图形的边缘再不是以前毛毛躁躁的样子了.这就是采用反锯齿算法的功劳.其实质就是把要绘制的颜 ...

  7. html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法

    这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下 指定颜色 黑色是Canvas绘制的默认色彩,要想换一种颜色的 ...

  8. html5实现canvas迷宫游戏,HTML5/Canvas/JS 迷宫生成动画

    JavaScript 语言: JaveScriptBabelCoffeeScript 确定 /** * JS for Hartcore * Alexandre Andrieux @2015 */ va ...

  9. html5 canvas 图片变形,HTML5/Canvas 流动的变形圆形

    JavaScript 语言: JaveScriptBabelCoffeeScript 确定 /** * inspired by: * Rectangle World * http://rectangl ...

最新文章

  1. 如何建立分类模型matlab,创建简单模型 - MATLAB Simulink - MathWorks 中国
  2. facebook工具xhprof的安装与使用-分析php执行性能
  3. 投资，个人未来的生存之道（任何个人必知）
  4. 数据结构——无向图创建邻接表以及深度遍历、广度遍历（C语言版）
  5. 活久见！月薪30k的小程序全栈开发到底有多难？
  6. php if require,关于php：required_if Laravel 5验证
  7. edoc2中标电子文件管理标准ERMS制定项目
  8. nuxt webpack配置css,基于nuxt通过webpack配置ant-Design-vue的主题切换配置
  9. xbox360无线手柄接收器驱动_创新设计的多模手柄，北通宙斯T6精英机械游戏手柄体验点评...
  10. mysql zf_ZF 连接 Mysql
  11. 用VB 代码读取 Excel 内容
  12. 台达plc控制伺服电机编程实例_三菱PLC控制伺服电机得编程实例
  13. SpringMVC在返回JSON数据时出现406错误解决方案
  14. python编程最大值_python求最大值最小值方法总结
  15. 两台电脑共享一套键盘鼠标的神器
  16. KKB：二进制知识：15瓶水，其中只有一瓶水有毒，请问至少需要几只小白鼠可以一次性喝出来？
  17. 利用Eigen库实现最小二乘拟合平面
  18. html网页随机一言,搭建Hitokoto网站·一言经典语句功能及调用案例
  19. vue添加背景及页面留白处理方法
  20. java云闪付,第三方支付-银联云闪付开发教程

热门文章

  1. mysql admin 修改密码_mysql修改密码的三种方式
  2. 魔众网盘系统 v1.3.0 后台菜单快捷搜索 修复已知问题
  3. mysql 注释 乱码_mysql中注释显示中文乱码怎么解决
  4. 沪港通股票交易常见问答
  5. js读取本地文件和写入本地文件
  6. Unity3D游戏出现接电话或其他系统铃声响应后,回到游戏后游戏声音失效的问题
  7. VsCode中安装webpack
  8. java上传图片到本地磁盘
  9. linux c语言不区分大小写查找,c语言字符串查找不分大小写
  10. linux posix支持中文,如何在Linux中使用POSIX方法从文件中读取Unicode-16字符串？