Parade Series

unix2linux

已于 2023-11-20 18:06:13 修改

阅读量143

点赞数

分类专栏： Canvas 文章标签： python flask sqlite javascript canvas

于 2023-10-26 23:25:36 首次发布

本文链接：https://blog.csdn.net/unix2linux/article/details/134066943

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

var cvs = document.getElementById('mainCanvas');
var ctx = cvs.getContext('2d');

var seconds2Time = function(datum) {
    var result = '';
    var hh = Math.floor(datum / 3600);
    var mm = Math.floor((datum - (hh * 3600)) / 60);
    var ss = datum - (hh * 3600) - (mm * 60);

    ss = Math.round(ss * 100) / 100

    result += '' + (hh < 10 ? "0" + hh : hh);
    result += ':' + (mm < 10 ? "0" + mm : mm);
    result += ':' + (ss  < 10 ? "0" + ss : ss);

    return result;
}

console.log('seconds2Time', 60, seconds2Time(60));

在这里插入图片描述

if (true) {
	var x0, y0, w0, h0， delta;

	x0 = y0 = w0 = h0 = delta = 0;
	w0 = parseInt(dynamic_form_device.devWidth);
	h0 = parseInt(dynamic_form_device.devHeight);
	delta = 80

	ctx.strokeStyle = 'white';
	ctx.beginPath();
	drawRect(ctx, 0 + delta, 0 + delta, w0 - 2*delta, h0 - 2*delta);
	ctx.stroke();
	ctx.closePath();
}

comTextColor = comTextColor.replaceAll('=#', '=');
comTextColor = comTextColor.replaceAll('=%23', '=');

comImagePath = encodeURIComponent(comImagePath);
devImagePath = encodeURIComponent(devImagePath);

this.comImagePath = decodeURIComponent(this.comImagePath);
this.devImagePath = decodeURIComponent(this.devImagePath);

在这里插入图片描述

var hex2Rgba = (hexColor, alpha = 0.9) => {
    var result = '';
    var color = hexColor.slice(1);
    var rgba = [
        parseInt("0x" + color.slice(0, 2)),
        parseInt("0x" + color.slice(2, 4)),
        parseInt("0x" + color.slice(4, 6)),
        alpha
    ];
    result = 'rgba(' + rgba.toString() + ')';
    console.log(hexColor, '>>>>', result);
    return result;
};

if (true) {
    var width  = metrics.width + metrics.actualBoundingBoxAscent;
    var height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
    ctx.fillStyle = hex2Rgba(dynamic_form_device.comTimeBackgroundColor);
    ctx.fillRect(x0, y0 - metrics.actualBoundingBoxAscent, width, height);
  	ctx.stroke();
}

var parade_facade = {
    "device": {},
    "image": [],
    "text": [],
    "video": [],
    "caption": [],
    "time": []
};

var dynamic_parade_url = '';
var urlParameter = function(param) {
    var token = param.replace(/[]/, '\[').replace(/[]/, '\[').replace(/[]/, '\\\]');
    var regex = new RegExp('[\\?&]' + token + '=([^&#]*)');
    var result = regex.exec(dynamic_parade_url);

    if (result == null)
        return '';
    else
        return decodeURI(result[1]);
};
var param2json = function() {
    parade_facade.device.portrait = urlParameter('devPortrait');
    parade_facade.device.height   = urlParameter('devHeight');
    parade_facade.device.width    = urlParameter('devWidth');
    parade_facade.device.image    = urlParameter('devImagePath');
};

if (true) {
	$('input[name="devPortrait"]').get(0).checked = true;
	console.log('>>>>', $('input[name="devPortrait"]:checked').val());
}

<select class="form-select" dropup=true id="comTimeFormat" name="comTimeFormat">
	<option value="yyyy年MM月dd日 HH:mm:ss">yyyy年MM月dd日 HH:mm:ss</option>
	<option value="yyyy年MM月dd日">yyyy年MM月dd日</option>
	<option value="HH:mm:ss">HH:mm:ss</option>
</select>

	$('#comTimeFormat').val(timeFormat);
	$('#select2-comTimeFormat-container').attr('title', timeFormat);
	$('#select2-comTimeFormat-container').html(timeFormat);