<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. HTML2列表表单框架

    HTML——Hyper Text Markup Language <html>,<head>,<body> 一.基本标签: (一)格式标签:——模型:word工具栏 ...

  2. 万事开头难——Cocos2d-x学习历程(一)

    万事开头难,不知该从哪里开始,不过既然要学习一样新东西,那就从了解它开始吧... Cocos2d-x是一个通用平面游戏引擎,基于一个同样十分著名的游戏引擎Cocos2d-iPhone设计,Cocos2 ...

  3. 开博第二篇：记一个利用JavaScript，编写PS脚本，开发图片量产工具

    背景:身在一个有实业的电商公司,设计部的妹子们总是会有做不完的商品图片,当然了,要是做点有技术含量的美化工作也罢,但是最近她们很是无聊,总是要做一些重复性的工作,就比如如题所说的,图片量产,量产什么呢 ...

  4. MySQL操作类的封装（PHP）

    <?php class mysql{ /** * 报错函数 * * @param string $error */ function err($error){ die("对不起,您的操 ...

  5. PHP中将对数据库的操作，封装成一个工具类以及学会使用面向对象的方式进行编程

    <?php class SqlTool { //属性 private $conn; private $host="localhost"; private $user=&quo ...

  6. C的陷阱和缺陷研读笔记02

    宏: 宏不是函数 展开会产生庞大的表达式 #define MIN(A,B) ((A) <= (B) ? (A) : (B))MIN(*p++, b)会产生宏的副作用 剖析: 这个面试题主要考查面 ...

  7. 【转】vs2010下创建webservice

    题记:学了六个月java一直想做java,没想到进了.NET项目组,还是VB2012,还有WebService,压力山大,这篇纯粹看看多图的效果,版主不要怪罪. Visual Studio 2010默 ...

  8. Keil MDK中使用pc-lint的详细方法

    keil MDK版本:V4.03 PC-lint版本:  V8.0 关于pc-lint的强大作用,网上有很多,这里不想再复述,只说一句:能通过pc-lint检验的程序不一定没有问题,但通过了pc-li ...

  9. QT creator+OpenCV2.4.2+MinGW 在windows下开发环境配置

    由于项目开发的原因,需要配置QT creator+OpenCV2.4.2+MinGW开发环境,现对配置方法做如下总结: 1.  下载必备软件 QT SDK for Open Source C++ de ...

  10. Apache HTTP Server

    下载 http://rj.baidu.com/soft/detail/14824.html?ald 安装完成后,打开浏览器,输入http://localhost/ 如果显示: It works! 则代 ...