<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>骰子</title>
</head>

<body>
      <canvas id="canvas" width="400" height="300"></canvas>
      <script type="text/javascript">
          function dice(){
              this.ctx=null;
              this.cwidth=400;
              this.cheight=300;
              this.dicex=50;
              this.dicey=50;
              this.dicewidth=100;
              this.diceheight=100;
              this.dotrad=6;
              
          }
           
          dice.prototype={
              
              ready:function()
              {   
                  var ch=Math.floor(Math.random()*6)+1;
                  this.drawface(ch);
              },
              
             drawface:function(i)
             {    
                  this.ctx=document.getElementById("canvas").getContext("2d");
                  this.ctx.lineWidth=5;
                  this.ctx.clearRect(this.dicex,this.dicey,this.dicewidth,this.diceheight);
                  this.ctx.strokeRect(this.dicex,this.dicey,this.dicewidth,this.diceheight);
                  this.ctx.fillStyle="#000000"
                  switch(i)
                  {
                     case 1:
                     this.Draw1();
                     break;
                     case 2:
                     this.Draw2();
                     break;
                     case 3:
                     this.Draw1();
                     this.Draw2();
                     break;
                     case 4:
                     this.Draw4();
                     break;
                     case 5:
                     this.Draw1();
                     this.Draw4();
                     break;
                     case 6:
                     this.Draw4();
                     this.Draw6();
                     break;
                  }
             },
            
             Draw1:function(){
                 var dotx,doty;
                 this.ctx.beginPath();
                 dotx=this.dicex + .5 * this.dicewidth;
                 doty=this.dicey + .5 * this.diceheight;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                 this.ctx.closePath();
                 this.ctx.fill()
             },
            
             Draw2:function(){
                 var dotx,doty;
                 this.ctx.beginPath();
                 dotx=this.dicex +3 * this.dotrad;
                 doty=this.dicey +3 * this.dotrad;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                 dotx=this.dicewidth + this.dicex - 3 * this.dotrad;
                 doty=this.diceheight + this.dicey - 3 * this.dotrad
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                 this.ctx.closePath();
                 this.ctx.fill()
             },
            
             Draw4:function(){
                 var dotx,doty;
                 this.ctx.beginPath();
                 dotx=this.dicex +3 * this.dotrad;
                 doty=this.dicey +3 * this.dotrad;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                
                 dotx=this.dicewidth + this.dicex - 3 * this.dotrad;
                 doty=this.dicey + 3 * this.dotrad;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                 this.ctx.closePath();
                 this.ctx.fill();
                
                 this.ctx.beginPath();
                 dotx=this.dicex + 3 * this.dotrad;
                 doty=this.dicey + this.diceheight - 3 * this.dotrad;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                
                 dotx=this.dicex + this.dicewidth - 3 * this.dotrad;
                 doty=this.dicey + this.diceheight - 3 * this.dotrad;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                
                 this.ctx.closePath();
                 this.ctx.fill()
             },
            
             Draw6:function(){
                
                 var dotx,doty;
                 this.ctx.beginPath();
                 dotx=this.dicex +3 * this.dotrad;
                 doty=this.dicey + 0.5 * this.diceheight;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                
                 dotx=this.dicewidth+this.dicex - 3 * this.dotrad;
                 doty=this.dicey + 0.5 * this.diceheight;
                 this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
                
                 this.ctx.closePath();
                 this.ctx.fill()
                
             }
            
          }
        
          var c=new dice();
          c.ready()
            
      </script>
</body>
</html>

html canvas 骰子1的更多相关文章

  1. Html5最简单的游戏Demo——Canvas绘图的骰子

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. html5掷骰子的小demo

    代码如下: <!DOCTYPE> <html> <title>柯乐义</title> <head> <script> var l ...

  3. 【整理】HTML5游戏开发学习笔记（1）- 骰子游戏

    <HTML5游戏开发>,该书出版于2011年,似乎有些老,可对于我这样没有开发过游戏的人来说,却比较有吸引力,选择自己感兴趣的方向来学习html5,css3,相信会事半功倍.不过值得注意的 ...

  4. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  5. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  6. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  7. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  8. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  9. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

随机推荐

  1. eslintrc配置翻译

    { "env": { "browser": true, "node": true, "commonjs": true } ...

  2. $.unique()去重问题

    var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);$.unique(yearArray); 返回 2009, 2010, 20 ...

  3. [C语言入门笔记]变量与数据类型

    变量与数据类型 什么是变量? 变量是一个变化的量 是内存中的一个空间 变量的定义方法是什么? 数据类型 变量名 = 值; 数据类型有哪些? 整型int 浮点型float double 字符型char ...

  4. JAVA GUI布局管理器

    边界布局管理器: a.布局方式:是把整个容器划分为五个部分.东西南北中,南北要贯通,中间最大 (不仅是中间的范围最大,权利也最大)当周边不存在的时候中间会占领周边,当中间不存在的时候周边不能占据中间 ...

  5. WPF：指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法

    文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...

  6. js 判断是什么类型浏览器

    //  firefoxif ( window.sidebar && "object" == typeof( window.sidebar ) && ...

  7. Windows Store App JavaScript 开发：模板绑定

    WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...

  8. JavaScript 面向对象(一) —— 基础篇

    学好JS的面向对象,能很大程度上提高代码的重用率,像jQuery,easyui等,这篇博客主要从细节上一步步讲JS中如何有效地创建对象,也可以看到常见的创建对象的方式,最后也会附上一些JS面向对象的案 ...

  9. Centos7 hostname重启失效

    /etc/hosts  文件如下 [root@god ~]# more /etc/hosts 127.0.0.1 localhost ::1 localhost localhost.localdoma ...

  10. PHPCMS开启伪静态和织梦开启伪静态的优缺点比较

    PHPCMS和织梦CMS都是国内比较出名的PHP语言的CMS程序系统,他们拥有比较完善的网站内容管理功能,也比较注重网站优化方面的功能,深受很多网站建设者的喜爱. 这两套系统,都有启用伪静态的功能,在 ...