<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. VB.NET 初涉线程的定义和调用

    什么是线程 说话一:进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独 ...

  2. juce Justification 分析

    很简单的一个类,一个rect放置在另一个rect中如何放置.只是没有考虑边距等,估且认为是在外层作考虑吧.然后认为是外框比内框大,所以外层怕是要进行检查才行 #ifndef JUCE_JUSTIFIC ...

  3. sublime text 2中Windows下编写的脚本在Linux平台上运行遇到字符问题

    今天在windows下的sublime text 2下写了个脚本,上传到ubuntu服务器中执行后提示: -bash: /usr/bin/python: /usr/bin/python^M: bad ...

  4. JSP（一）

    开宗明义:JSP本质上就是一个Servlet scriplet JSP 变量和函数的声明 局部变量 <% int a = 3;> 全局变量和函数 <%! int a = 3;> ...

  5. excel文件后台代码

    很多情况下,我们都需要从Excel中获取数据来创建Word报表文档.首先在Excel中分析数据,然后将分析结果导出到Word文档中发布.技术实现方式:1.创建Word模板,用来作为数据分析结果发布平台 ...

  6. python程序不支持中文

    SyntaxError: Non-ASCII character '\xe8' in file delete.py on line 4, but no encoding declared; see h ...

  7. Scala基础入门－1

    首先需要Scala开发环境的搭建,网上自己找教程. 声明常量与变量 val foo = 0 // 常量 var bar = 0 // 变量 在Scala中,更加鼓励使用val来进行声明,也就是推荐使用 ...

  8. Oracle EBS-SQL (WIP-11):检查期间任务完工记录数.sql

    select        WE.WIP_ENTITY_NAME                 任务名称,        WDJ.class_code                         ...

  9. poj3100---求根问题

    题意:a的n方=b,a这个整数与b开n方的值相近,分别向上取整和向下取整,同时n方,b一定介于这两个整数之间,然后比较这两个数与b的距离,取最近的 收获:c++的cei和floor函数在c中的向上取整 ...

  10. centos6.5 eclipse C/C++开发环境