<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. delete大批量数据引起空间爆满处理

    前一天晚上做大表删除操作测试,分段删除,没删除100000条commit一次,由于存储过程打印了执行时间中途断网,无法看到执行时间于是直接kill了任务结果早上登录测试数据库发现空间爆满然后一时糊涂去 ...

  2. EventBusException：xxxx has no methods onEvent

    使用第三方框架EventBus,在register时出现Exception:xxxx has no methods onEvent. 场景:在Activity中没有接收事件,只是需要发送事件,但是有对 ...

  3. OC——封装（初级与高级）

    所谓的封装,就是通过定义方法或者函数去操作成员属性或者成员变量,而不是直接通过指针方式去操作.借此达到提高代码安全性,代码可行性以及代码执行效率的目的. 1:初级封装,对成员变量进行封装. #impo ...

  4. c++ ：OOP之静态类型与动态类型

    所谓静态类型即类型指针或引用的字面类型:而动态类型即类型指针或引用的实际类型. 这一对概念一般发生在基类和派生类之间. 如: class Base { ..... } class Derived : ...

  5. mysql优化(2) 观察mysql进程状态

    环境准备,安装sysbench wget http://nchc.dl.sourceforge.net/project/sysbench/sysbench/0.4.12/sysbench-0.4.12 ...

  6. Ubuntu 12.04 wireless networks : devices not ready (firmware missing)解决办法

    今天装了Ubuntu12.04之后,发现无线不能用. 用iwconfig查看,wlan0 项后面有内容,但是在本该显示无线列表的地方显示的是 “ wireless networks : devices ...

  7. Python入门之中文乱码

    python入门编码: Python 文件中如果未指定编码,有中文代码时候,在执行过程会出现报错: File "test.py", line 2 SyntaxError: Non- ...

  8. 自定义HTTP错误页太小，导致显示默认友好错误页问题

    一 . 问题描述: chrome 向服务器发送构造字符串,返回错误页面如下 <html> <head> <title>404 Not Found</title ...

  9. linux命令——scp

    scp linux系统之间基于ssh登录的安全copy文件或者目录.本地［local］—— 远程［remote］{文件} scp local_file remote_username@remote_i ...

  10. 如何使用getopt()函数解析参数

    最近在写程序的过程中,把一部分时间都花费在程序对参数的处理上.今天听了学长说到getopt函数,才发现原来c里面还有一个专门解决参数处理的函数,查询了相关资料,这里简单总结一下. 使用int main ...