HTML5 Canvas游戏开发实战-读书笔记之一 [javascript类介绍]

最新推荐文章于 2024-04-21 00:52:44 发布

weixin_34318956

最新推荐文章于 2024-04-21 00:52:44 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/wangdk/blog/124552

本文介绍了一个简单的HTML与JavaScript结合使用的示例，通过获取HTML5画布元素并在其上绘制红色矩形来演示基本操作。此外，还展示了如何使用JavaScript获取地理位置信息，并提供了一个静态类的定义和示例。

html:

<!doctype>
<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" height="500" width="500"></canvas>
         <script src="index.js"></script>
        
    </body>
</html>

JavaScript:

// canvas 简单例子
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    // 设置颜色
    context.fillStyle = 'rgb(255,0,0)';
    // 填充区域
    context.fillRect(20,30,64,36);
}

// 所在位置
window.addEventListener('load', function(){
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(update);
    }
}, false);

function update(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    console.log('经度:' + lng);
    console.log('纬度' + lat);
}

// javascript 静态类
var StaticClass = function(){};
StaticClass.name = "wangdk";
StaticClass.Sum = function (n1, n2) {
    return n1 + n2;
}

// 公共函数
function MyClass (name, age) {
    this.name = name;
    this.age = age;
}
// 这样声明保证函数的公用，不用每个实例都复制一个toString 方法
MyClass.prototype.toString = function(){
    alert(this.name + ':' + this.age);
}

// 继承

function PeopleClass() {
    this.type = '人';
}
PeopleClass.prototype = {
        getType:function() {
            alert('这是一个人');
        }
}
//
//function StudentClass(name, gender) {
//   this.name = name;
//   this.gender = gender;
//}

// 继承属性
//function StudentClass(name, gender) {
//    PeopleClass.apply(this, arguments);
//    this.name = name;
//    this.gender = gender;
//}

//var stu = new StudentClass('wangdk', 'm');
//console.log(stu)
// 方法的继承

function StudentClass(name, gender) {
    PeopleClass.apply(this.agruments);
    var prop;
    for (prop in PeopleClass.prototype) {
        // constructor 构造函数
        var proto = this.constructor.prototype;
        // 当前没有方法
        if (!proto[prop]) {
            proto[prop] = PeopleClass.prototype[prop]
        }
        proto[prop]['super'] = PeopleClass.prototype;
    }
    this.name = name;
    this.gender = gender;
}

var stu = new StudentClass('wangdk', 'm');
console.log(stu);

转载于:https://my.oschina.net/wangdk/blog/124552