增加视频播放页面

This commit is contained in:
2025-01-09 09:28:14 +08:00
parent b6eb3b0d35
commit 8572bebabb
16 changed files with 3098 additions and 104 deletions

View File

@@ -4,9 +4,7 @@
<canvas class="mycanvas" canvas-id="mycanvas" :style="'width:' + (windowWidth-60) + 'px;height:520px'"></canvas>
<block>
<!-- 展示图片 -->
<image class="imgs" :style="'width:' + (windowWidth-60) + 'px;height:520px'" :src="imgUrl" mode=""></image>
</block>
@@ -135,32 +133,32 @@
/**
* 绘制名称
*/
const setText = (context, fs, color, x, y, c, bold) => {
context.setFillStyle(color);
context.setTextAlign('left');
if (bold) {
context.font = 'normal bold 20px Arial,sans-serif';
} else {
context.font = 'normal 20px Arial,sans-serif';
}
context.setFontSize(fs);
context.fillText(c, x, y);
context.restore();
};
setText(ctx, 14, '#333', 85, 35, this.posterData.name, 'bold');
setText(ctx, 12, '#999', 85, 58, '为您挑选了一个好礼物');
ctx.save();
// const setText = (context, fs, color, x, y, c, bold) => {
// context.setFillStyle(color);
// context.setTextAlign('left');
// if (bold) {
// context.font = 'normal bold 20px Arial,sans-serif';
// } else {
// context.font = 'normal 20px Arial,sans-serif';
// }
// context.setFontSize(fs);
// context.fillText(c, x, y);
// context.restore();
// };
// setText(ctx, 14, '#333', 85, 35, this.posterData.name, 'bold');
// setText(ctx, 12, '#999', 85, 58, '为您挑选了一个好礼物');
// ctx.save();
/**
* 绘制头像
*/
ctx.beginPath();
let avatar_width = 60; //头像宽度
let avatar_height = 60; //头像高度
let avatar_x = 15; //头像的x坐标
let avatar_y = 15; //头像的y坐标
let radius = 8 //头像的圆角弧度
// 绘制圆角头像
this.setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius)
// ctx.beginPath();
// let avatar_width = 60; //头像宽度
// let avatar_height = 60; //头像高度
// let avatar_x = 15; //头像的x坐标
// let avatar_y = 15; //头像的y坐标
// let radius = 8 //头像的圆角弧度
// // 绘制圆角头像
// this.setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius)
// 绘制圆形图片
// this.setCircular(ctx, avatar_width, avatar_height, avatar_x, avatar_y)
@@ -169,7 +167,7 @@
// 绘制商品价格
let pirce = '¥ ' + this.posterData.money
this.setGoodsPrice(ctx, 20, this.colors, 15, 410, pirce)
// this.setGoodsPrice(ctx, 20, this.colors, 15, 410, pirce)
// 绘制商品名称
this.setGoodsName(ctx)
@@ -264,7 +262,7 @@
},
setGoodsImg(ctx) { //绘制中间商品图片
let width = this.windowWidth - 90
ctx.drawImage(this.posterData.img, 15, 95, width, width);
ctx.drawImage(this.posterData.img, 15, 15, width, width);
ctx.save();
},
setGoodsPrice(ctx, fs, color, x, y, c, bold) { //绘制商品价格