Html 用TypeScript绘制画布图像
Html 用TypeScript绘制画布图像,html,typescript,canvas,Html,Typescript,Canvas,您正在使用fillRect调用在图像上绘制一个白色正方形 从绘制画布（前一帧）开始的每一帧，都需要开始清除该帧，然后在空画布上绘制图像，最后在其上绘制指针： export class LevelMeter { private readonly value: Array < number > ; ctx: CanvasRenderingContext2D; constructor(canvas: HTMLCanvasElement, options: Options)
您正在使用fillRect调用在图像上绘制一个白色正方形 从绘制画布（前一帧）开始的每一帧，都需要开始清除该帧，然后在空画布上绘制图像，最后在其上绘制指针：
export class LevelMeter {
private readonly value: Array < number > ;
ctx: CanvasRenderingContext2D;
constructor(canvas: HTMLCanvasElement, options: Options) {
this.ctx = < CanvasRenderingContext2D > canvas.getContext('2d');
this.img = new Image();
this.img.src = './img/vumeter.png';
this.img.onload = () => window.requestAnimationFrame(this.draw.bind(this));
}
draw() {
let _ctx = this.ctx;
_ctx.drawImage(this.img, 0, 0);
_ctx.clearRect(0, 0, 500, 500);
_ctx.save();
_ctx.strokeStyle = 'red';
_ctx.translate(150, 180);
_ctx.rotate((Math.PI * ((Math.random() * 0.5) + 1.25))
_ctx.beginPath(); _ctx.moveTo(0, 0); _ctx.lineTo(160, 0);
//_ctx.closePath();
_ctx.stroke(); _ctx.restore();
window.requestAnimationFrame(this.draw.bind(this));
}
}
出口级液位计{
私有只读值：数组；
ctx:CanvasRenderingContext2D；
构造函数（画布：HTMLCanvasElement，选项：选项）{
this.ctx=canvas.getContext（'2d'）；
this.img=新图像（）；
this.img.src='./img/vumeter.png'；
this.img.onload=（）=>window.requestAnimationFrame（this.draw.bind（this））；
}
画（）{
设_ctx=this.ctx；
_ctx.drawImage（this.img，0,0）；
_ctx.clearRect（0,0500500）；
_ctx.save（）；
_ctx.strokeStyle=‘红色’；
_ctx.translate（150180）；
_ctx.rotate（（Math.PI*（（Math.random（）*0.5）+1.25））
_ctx.beginPath（）；_ctx.moveTo（0,0）；_ctx.lineTo（160,0）；
//_ctx.closePath（）；
_ctx.stroke（）；_ctx.restore（）；
window.requestAnimationFrame（this.draw.bind（this））；
}
}