<html>

<head>
<title>Throwing die</title>
<script>
    var canv_width  = 400;
    var canv_heigth = 300;
    var dice_x  = 50;
    var dice_y  = 50;
    var dice_width  = 100;
    var dice_height = 100;
    var dotrad = 6;
    var ctx;

function init() {
    var ch = Math.floor(Math.random()*6) + 1;
    drawface(ch);
}

function drawface(n) {
    ctx = document.getElementById("canvas").getContext('2d');
    ctx.lineWidth = 5;
    ctx.clearRect(dice_x, dice_y, dice_width, dice_height);
    ctx.strokeRect(dice_x, dice_y, dice_width, dice_height);
    ctx.fillStyle = "#009966";
    
    switch(n) {
        case 1: Draw1();
                break;
        case 2: Draw2();
                break;
        case 3: Draw3();
                break;
        case 4: Draw4();
                break;
        case 5: Draw5();
                break;
        case 6: Draw6();
                break;
        default:break;
    }
}

function Draw1() {
    var dot_x = dice_x + 0.5 * dice_width;
    var dot_y = dice_y + 0.5 * dice_height;

ctx.beginPath();
    ctx.arc(dot_x, dot_y, dotrad, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

function Draw2() {
    var dot_x;
    var dot_y;
    
    dot_x = dice_x + 4*dotrad;
    dot_y = dice_y + 4*dotrad;
    ctx.arc(dot_x, dot_y, dotrad, 0, Math.PI * 2, true);
    ctx.closePath();
    
    dot_x = dice_x + dice_width - 4*dotrad;
    dot_y = dice_y + dice_height - 4*dotrad;
    ctx.arc(dot_x, dot_y, dotrad, 0, Math.PI * 2, true);
    ctx.closePath();
    
    ctx.fill();
}

</script>
</head>

<body onLoad="drawface(2);">
<canvas id="canvas" width="400", height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>

</html>

<p id="p"></p>

document.getElementById("p");

x.innerHTML = "xxx";

x.style.color = "#ff0000";

<input id="i"></input>

document.getElementById("i");

x.value = "xxx";

<img id="im"></img>

document.getElementById("im");

x.src = "/xxx/xxx.jpg";

javascript学习笔记(2)的更多相关文章

  1. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  2. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  4. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  6. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  7. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  8. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  9. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  10. Java程序猿的JavaScript学习笔记（1——理念）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. C#高效分页代码(不用存储过程)

    首先创建一张表(要求ID自动编号): create table redheadedfile ( id ,), filenames ), senduser ), primary key(id) ) 然后 ...

  2. word2vec配置到使用

    (1)首先下载word2vec,地址:https://code.google.com/p/word2vec/,可能下载的时候有问题,google上不去,那么可以从csdn上面下载. 解压后目录如下: ...

  3. php汉字转Unicode编码函数

    /** * $str 原始字符串 * $encoding 原始字符串的编码,默认GBK * $prefix 编码后的前缀,默认"&#" * $postfix 编码后的后缀, ...

  4. getHibernateTemplate().find()

    find(String queryString, Object[] values); 这个方法后者的参数必须是一个数组,而不能是一个List. List ul=getHibernateTemplate ...

  5. jQuery学习-事件之绑定事件（一）

    我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处 ...

  6. OS X 键盘快捷键

    了解有关常见 OS X 键盘快捷键的信息.键盘快捷键是通过按下键盘上的组合键来调用 OS X 功能的一种方式. 若要使用键盘快捷键或按键组合,您可以同时按修饰键和字符键.例如,同时按下 Command ...

  7. 怎样学习使用libiconv库

    怎样学习使用libiconv库 - My Study My Study About My Learn or Study etc. 怎样学习使用libiconv库 By Cnangel on Febru ...

  8. Android常用控件之GridView使用BaseAdapter

    我们可以为GridView添加自定义的Adapter,首先看下用自定义Adapter的显示效果 在布局文件main.xml文件中定义一个GridView控件 <RelativeLayout xm ...

  9. SharePoint 2013 讨论板列表"Connect to Outlook" 不可用解决方案

    本文讲述 SharePoint 2013 讨论板列表"Connect to Outlook" 不可用解决方案. SharePoint中的讨论板列表是可以集成到Outlook里面去的 ...

  10. Error occured processing XML &#39;Cannot find class [springmvc.extention.BeanArgumentResolver]&#39;.

    <Description Resource Path Location Type Error occured processing XML 'Cannot find class [springm ...