canvas绘制星星

本文将介绍如何利用HTML5的canvas元素,结合JavaScript技术,细致地绘制出逼真的星空效果,包括星星的闪烁、星座连线等动态效果,让你的网页背景动起来。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var Canvas = function (el, parameter) {
    this.canvas = document.getElementById(el);
    this.width = canvas.width;
    this.height = canvas.height;
    this.pen = canvas.getContext('2d');
    parameter = parameter || {};
    if (Object.prototype.toString.call(parameter) !== '[object Object]') {
        throw new Error('Parameter must be a Object.')
    } else {
        var fillStyle = parameter.fillStyle || 'yellow';
        var strokeStyle = parameter.strokeStyle || 'black';
        var lineWidth = parameter.lineWidth || 1;
    }
    this.pen.fillStyle = fillStyle;
    this.pen.strokeStyle = strokeStyle;
    this.pen.lineWidth = lineWidth;
};
Canvas.prototype.clearRect = function (x, y, width, height) {
    if (!x) {
        this.pen.clearRect(0, 0, this.width, this.height);
    } else {
        this.pen.clearRect(x, y, width, height);
    }
};
Canvas.prototype.set = function (parameter) {
    if (parameter.fillStyle) {
        this.pen.fillStyle = parameter.fillStyle;
    }
    if (parameter.strokeStyle) {
        this.pen.strokeStyle = parameter.strokeStyle;
    }
    if (parameter.lineWidth) {
        this.pen.lineWidth = parameter.lineWidth
    }
};
Canvas.prototype.drawStar = function (parameter) {
    parameter = parameter || {};
    if (Object.prototype.toString.call(parameter) !== '[object Object]') {
        throw new Error('Parameter must be a Object.')
    } else {
        var stroke = parameter.stroke === undefined ? true : parameter.stroke;
        var fill = parameter.fill === undefined ? true : parameter.fill;
        var angleCount = parameter.angleCount || 5;
        var radius = parameter.radius || this.width < this.height ? this.width / 2 : this.height / 2;
        var x = parameter.x || this.width / 2;
        var y = parameter.y || this.height / 2;
    }
    var angle = Math.PI / angleCount;
    this.pen.translate(x, y);
    this.pen.beginPath();
    this.pen.moveTo(0, -radius);
    for (var i = 0; i < angleCount * 2; i++) {
        this.pen.rotate(angle);
        if (i % 2 === 0) {
            this.pen.lineTo(0, -radius / 2);
        } else {
            this.pen.lineTo(0, -radius);
        }
    }
    this.pen.closePath();
    if (fill) {
        this.pen.fill()
    }
    if (stroke) {
        this.pen.stroke();
    }
    this.pen.translate(-this.x, -this.y);
};

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值