<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. eclipse 各种版本spring插件安装

    一.安装之前先得知道怎么下载吧: 一般网上找到的资料是到这里就GG了的 --> http://spring.io/tools/sts/all 很明显这点版本是不够我们需要的,假如我们的eclip ...

  2. php中__autoload()方法详解

    [导读] PHP在魔术函数__autoload()方法出现以前,如果你要在一个程序文件中实例化100个对象,那么你必须用include或者require包含进来100个类文件,或者你把这100个类定义 ...

  3. HTTP中的URL长度限制（资料整理）

    HTTP中的URL长度限制   首先,其实http 1.1 协议中对url的长度是不受限制的,协议原文: The HTTP protocol does not place any a priori l ...

  4. POC- Proof of Cocept -- 概念验证

    POC,是Proof of Concept的缩写,意思是为观点提供证据,它是一套建议的电子模型,实例化代码,它可用于论证团队和客户的设计,允许评估和确认概念设计方案,POC的评价可能引起规格和设计的调 ...

  5. 在Linux下sqlplus 登录时显示SID 和用户名

    一般显示为: SQL> show user USER 为 "SYS" SQL> 在 $ORACLE_HOME/sqlplus/admin目录下 编辑glogin.sql ...

  6. PixelFormat 图像颜色的数据格式

    PixelFormat: (指定图像中每个像素的颜色数据的格式) Delphi                                        微软                    ...

  7. offsetParent和parentNode区别

    offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置,不过这只支持最新的浏览器,如果要兼容像O ...

  8. C语言的本质（6）——位运算

    位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,short,int与long类型 ...

  9. POJ——位查询

    3:位查询 查看 提交 统计 提问 总时间限制:  5000ms  内存限制:  65536kB 描述 给出N个范围在[0, 65535]的整数,编程支持以下的操作: (1)修改操作:C d,所有的数 ...

  10. Day1_算法分析方法

    课堂笔记: 程序执行效率影响因子: 输入:评估时使用最坏情况输入 输入大小:考虑n渐进∞ 机器执行效率: 忽略 两种排序算法比较 插入排序n2 归并排序nlgn 递归 技能1:评估多项式的时间级数θ ...