<!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. centos 7 编译zabbix 3.2.2

    已有LNMP环境. 1.安装zabbix需要的依赖包,红色部门的包官方yum源没有,需要自己下载 yum install net-snmp fping iksemel net-snmp-devel   ...

  2. (转)javascript 奇淫巧技44招

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  3. win7 winsxs精简 cmd 脚本之 再次 改进版

    dos时代菜鸟发表于 2012-7-24 http://bbs.wuyou.net/forum.php?mod=viewthread&tid=255200&highlight=win7 ...

  4. chrome 跨域设置

    右击chrome快捷方式,在启动指令后面添加--disable-web-security,然后保存.如下: "C:\Program Files (x86)\Google\Chrome\App ...

  5. Sprint1（第三天11.16）

    Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/qu ...

  6. Hbase关于Java常用API举例

    1. HBase相关对Admin操作的的API封装在HBaseAdmin中,封装了HBase常用操作的API 使用方法: pom.xml <!-- https://mvnrepository.c ...

  7. python【6】-函数式编程

    一.高阶函数 map,reduce 1.map() 函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. def f(x): retur ...

  8. POJ 3126 Prime Path

    给定两个四位素数a  b,要求把a变换到b 变换的过程要保证  每次变换出来的数都是一个 四位素数,而且当前这步的变换所得的素数  与  前一步得到的素数  只能有一个位不同,而且每步得到的素数都不能 ...

  9. php开发必备小工具

    /*递归删除目录及目录下的文件*/ function del_dir($dir){ $files = new DirectoryIterator($dir); foreach ($files as $ ...

  10. express

    1.基于node.js的web开发框架. 2.express目录结构: node_modules public routes views app.js:项目主文件 package.json 3.获取程 ...