<!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. MFC编程入门之二十二（常用控件：按钮控件Button、Radio Button和Check Box）

    本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...

  2. 转：深入浅出UML类图（具体到代码层次）

    深入浅出UML类图 作者:刘伟 ,发布于:2012-11-23,来源:CSDN   在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML ...

  3. Gevent中信号量的使用

    greenlet间同步方法:信号量 1.为什么引入信号量: 2.gevent信号量有哪些: 3.编程实现. 为何引入信号量 信号量是一个允许Greenlet相互合作,限制并发访问或运行的低层次的同步原 ...

  4. Struts2标签之Checkbox

    <s:checkbox name="permisskey" label="帅哥" value="true" fieldValue=&q ...

  5. ubuntu的一些常用命令，测试版本：Ubuntu 12.04.5 LTS

    最近配置了一台Linux服务器,选用的是Ubuntu 12.04.5 LTS版本. 把之前放在Windows Server 2003上的网站移到了现在的服务器上,给我的感受用一个字形容:真JB快! 网 ...

  6. Android和iOS常用命令学习（真机）

    1. 安装应用: Android: adb install xxx.apk iOS: ideviceinstaller -i xxx.ipa 2. 卸载应用 Android: abd uninstal ...

  7. 关于CDN下查找网站真实ip

    关于CDN下查找网站真实ip From  t00ls.net -----雨苁收集 杂乱无章,自己慢慢看,有问题加Q2359795780~~~~~~噗 先来几张t00lslogo             ...

  8. 51nod 1174 1174 区间中最大的数

    题目链接:51nod 1174 1174 区间中最大的数 ST(Sparse Table)算法学习参考博客:http://blog.csdn.net/niushuai666/article/detai ...

  9. JavaScript toLocaleString() 方法

    JavaScript toLocaleString() 方法 JavaScript Array 对象 定义和用法 把数组转换为本地字符串. 语法 arrayObject.toLocaleString( ...

  10. Java--静态区域块

    public class Demo3_2 { static int i=1; static //静态区域块 { //该静态区域块只被执行一次 System.out.println("a&qu ...