canvas签字TS版

最新推荐文章于 2023-10-30 23:25:34 发布

努力的程序员30*15k

最新推荐文章于 2023-10-30 23:25:34 发布

阅读量629

点赞数

分类专栏： TS 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45712583/article/details/125695609

版权

TS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.功能有颜色选中
2.相扑擦
3.字号调节
4.写好的文字可以下课下来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./require.js" data-main="./js/Main"></script> -->
</head>
<body>
    <script type="module">
        import Main from "./js/Main.js";
        new Main();
    </script>
</body>
</html>

IData.ts文件
export default  interface IData{
    xAxis: {
        type:string,
        data:Array<string>
      },
      yAxis: {
        type:string
      },
      series:Array<{data:Array<number>,type:string}>
}

创建一个Line.ts文件
import IData from "./IData.js";
import Main from "./Main.js";

export default class Line{
    private canvas:HTMLCanvasElement;
    private ctx:CanvasRenderingContext2D;
    private _data?:IData;
    private readonly LEFT_GAP:number=50;
    private readonly BOTTOM_GAP:number=50;
    constructor(canvas:HTMLCanvasElement){
        this.canvas=canvas;
        this.ctx=canvas.getContext("2d") as CanvasRenderingContext2D;

    }
    public set data(value:IData|undefined){
        this._data=value;
        this.update();
    }
    public get data():IData|undefined{
      return this._data;
    }
    private update():void
    {
        if(!this.data) return;
        var w:number=(Main.WIDTH-this.LEFT_GAP*2)/this.data.xAxis.data.length;
        var max=Math.max(...this.data?.series[0].data as Array<number>);
        var n=10**(max.toString().length-1);
        var limit:number=(Math.ceil(max/(n))*n)
        var gap:number=limit/6;
        var height:number=(Main.HEIGHT-this.BOTTOM_GAP*2)/6;
        this.drawRulerX(w);
        this.drawRulerY(gap,height);
        this.drawLine(w,gap,height);
    }
    private drawRulerX(w:number):void
    {
        this.ctx.lineWidth=1;
        this.ctx.strokeStyle="black";
        this.ctx.beginPath();
        this.ctx.moveTo(this.LEFT_GAP,Main.HEIGHT-this.BOTTOM_GAP);
        this.ctx.lineTo(Main.WIDTH-this.LEFT_GAP,Main.HEIGHT-this.BOTTOM_GAP);
        
        if(!this.data) return;
        for(var i=0;i<this.data.xAxis.data.length+1;i++){
             this.ctx.moveTo(this.LEFT_GAP+w*i,Main.HEIGHT-this.BOTTOM_GAP);
             this.ctx.lineTo(this.LEFT_GAP+w*i,Main.HEIGHT-this.BOTTOM_GAP+15);
             this.ctx.font="18px 宋体";
             this.ctx.textAlign="center";
            if(i<this.data.xAxis.data.length)  this.ctx.fillText(this.data.xAxis.data[i],this.LEFT_GAP+w*i+w/2,Main.HEIGHT-this.BOTTOM_GAP+20);
        }
        this.ctx.stroke();
        
    }

    private drawRulerY(gap:number,height:number):void{
        this.ctx.lineWidth=0.5; 
        this.ctx.font="12px 宋体";
        this.ctx.textBaseline="middle";
        this.ctx.textAlign="right";
        this.ctx.strokeStyle=" black";
        this.ctx.beginPath();
        for(var i=1;i<7;i++){ 
            this.ctx.moveTo(this.LEFT_GAP,Main.HEIGHT-this.BOTTOM_GAP-i*height);
            this.ctx.lineTo(Main.WIDTH-this.LEFT_GAP,Main.HEIGHT-this.BOTTOM_GAP-i*height);
            this.ctx.fillText(String(gap*i),this.LEFT_GAP-5,Main.HEIGHT-this.BOTTOM_GAP-i*height)
        }
        this.ctx.stroke();
       
    }

    private drawLine(w:number,gap:number,height:number){
        if(!this.data) return;
        var w:number=(Main.WIDTH-this.LEFT_GAP*2)/this.data.xAxis.data.length;
        this.ctx.lineWidth=1;
        this.ctx.strokeStyle="blue";
        this.ctx.beginPath();
        for(var i=0;i<this.data.series[0].data.length;i++){
            // console.log(this.data.series[0].data[i]);
            var x:number=this.LEFT_GAP+w*i+w/2
            var y:number=Main.HEIGHT-this.BOTTOM_GAP-(this.data.series[0].data[i]*height/gap);
            if(i===0) this.ctx.moveTo(x,y);
            else this.ctx.lineTo(x,y);
            this.ctx.arc(x,y,3,0,Math.PI/180*360);
        }
        this.ctx.stroke();
    }
}

创建一个Main.ts
import IData from "./IData.js";
import Line from "./Line.js";

export default class Main{
    private canvas:HTMLCanvasElement;
    private ctx:CanvasRenderingContext2D;
    public static readonly WIDTH:number=800;
    public static readonly HEIGHT:number=600;
    public static default:Main
    private line?:Line;
    private data:IData={
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { 
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 1218, 135, 547, 26],
            type: 'line'
          }
        ]
      };
    constructor(){
        this.canvas=document.createElement("canvas");
        this.canvas.width=Main.WIDTH;
        this.canvas.height=Main.HEIGHT;
        Object.assign(this.canvas.style,{
            boxShadow:"0px 0px 4px 4px #999"
        } as CSSStyleDeclaration)
        this.ctx=this.canvas.getContext("2d") as CanvasRenderingContext2D;
        document.body.appendChild(this.canvas);
        this.update();
    } 
    update(){
     
        this.line=new Line(this.canvas);
        this.line.data=this.data;
    }
    
}