<!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. 为什么说invalidate()不能直接在线程中调用

      1.为什么说invalidate()不能直接在线程中调用?2.它是怎么违背单线程的?3.Android ui为什么说不是线程安全的?4.android ui操作为什么一定要在UI线程中执行? 1. ...

  2. PHP 底层的运行机制与原理

    PHP说简单,但是要精通也不是一件简单的事.我们除了会使用之外,还得知道它底层的工作原理. PHP是一种适用于web开发的动态语言.具体点说,就是一个用C语言实现包含大量组件的软件框架.更狭义点看,可 ...

  3. nodejs&npm等概念梳理

    nodejs node node版本 npm nvmw\gnvm等多版本管理 CommonJS.AMD.requirejs grunt.gulp package.json .npmrc npm\nod ...

  4. python3 实现简单的信用卡还款，取款转账功能V2

    仅实现还款,取款,转账,信息查询功能 程序结构: atm(函数主执行程序): #Author by Andy #_*_ coding:utf-8 _*_ import os,sys Father_pa ...

  5. java使用代理 html2canvas 截屏 将页面内容生成图片

    1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...

  6. 突破php的imagecopyresampled 和imagecopyresized 实现图片马JPG

    编辑器加载中...之前有人发布了 利用PNG 图片上述压缩函数的方法 原理利用 PNG的结构IDAT chunks填充一句话webshell,并进行一套取模运算 详见: https://www.ido ...

  7. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  8. C++ void*的使用

    void*类型可以存储任何类型的指针,使用的时候强制转化成对应类型的指针便可. #include <iostream> #include <vector> using name ...

  9. c# 判断当前时间是否在 工作日时间段内

    #region //获取当前周几 private string _strWorkingDayAM = "08:30";//工作时间上午08:00 private string _s ...

  10. Javascript理解this对象

    this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象. 通过以下几个例子加深对this的理解. (1)作为函数调用 var name = 'Jenny'; functi ...