<!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. easyui combobox 左匹配模糊查询

    之前一直不知道,easyui 的combobox还有从左匹配查询显示数据的. 样式是这样的:(这是数据是已经存在下拉列表里的) 在这样操作的时候,遇到了一个问题.(其实也不算问题的). 就是操作人员在 ...

  2. es5 and es6

    es5学习地址:http://www.zhangxinxu.com/wordpress/2013/04/es5%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9 ...

  3. BIOS MCSDK 2.0 学习笔记（一）

    MCSDK简介 BIOS MCSDK是为TI的高性能多核DSP提供的一套组件,包括: SYS/BIOS实时操作系统 Chip support libraries, drivers, and basic ...

  4. python——创建django项目全攻略(野生程序员到家养程序员的完美进化)

    新建工程 我用pycharm写代码,所以一般就用pycharm创建django工程.右上角File-New Project.选择路径,修改项目名称,确定.就可以创建一个新的django工程.     ...

  5. visual studio错误解决 [error LNK1104: 无法打开文件“gdi32.lib”]

    哔了狗.我是win7装的vs2013,本着体验一下"新"玩意的心情.(然而2017都快出来了),没想到竟遇到如此粗鄙的问题. 从错误信息上明显可以了解是缺少一个静态库.(当然错误信 ...

  6. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  7. 16090202（剑灵GPA）

    [目标] 剑灵GPA [思路] 1 2 绘制角色DrawCall body 5526面片 2.1[第一个DrawCall]63 RT 这个DrawCall PS VS 参数列表 VS // // Ge ...

  8. Kettle6.0安装及问题总结-白痴教程

    1.安装JDK 配置java环境变量 2.安装KETTLE: 官方下载地址:http://community.pentaho.com/projects/data-integration/ 下载完后,解 ...

  9. x64内联汇编注意点

    #include <windows.h> #include <stdio.h> extern "C" int MyPrintf(ULONGLONG,ULON ...

  10. CSS3回执特殊图形