每日一个js实例1---纯js与canvas实现心电图网格绘制

来源：互联网发布：知天下之牛耳编辑：程序博客网时间：2024/04/29 10:45

<canvas id="ecg1">浏览器暂不支持h5的canvas元素</canvas>

function drawGrid(id){    this.c_canvas = document.getElementById(id);    this.context =this. c_canvas.getContext("2d");    this.w = this.c_canvas.width = window.innerWidth;    this.h=this.c_canvas.height =window.innerHeight;    this.drawSmallGrid();    this.drawMediumGrid();    this.drawBigGrid();    return;}drawGrid.prototype.drawSmallGrid= function () {    this.context.strokeStyle = "#f1dedf";    this.context.strokeWidth=1;    this.context.beginPath();    for (var x = 0.5; x < this.w; x += 3) {        this.context.moveTo(x, 0);        this. context.lineTo(x,  this.h);        this.context.stroke();    }    for (var y = 0.5; y < this.h; y += 3) {        this.context.moveTo(0, y);        this.context.lineTo(this.w, y);        this.context.stroke();    }    this. context.closePath();    return;}drawGrid.prototype.drawMediumGrid= function () {    this.context.strokeStyle = "#f0adaa";    this.context.strokeWidth=1;    this.context.beginPath();    for (var x = 0.5; x < this.w; x += 15) {        this.context.moveTo(x, 0);        this.context.lineTo(x, this.h);        this.context.stroke();    };    for (var y = 0.5; y < this.h; y += 15) {        this.context.moveTo(0, y);        this.context.lineTo(this.w, y);        this.context.stroke();    };    this.context.closePath();    return;}drawGrid.prototype.drawBigGrid= function () {    this.context.strokeStyle = "#e0514b";    this.context.strokeWidth=1;    this.context.beginPath();    for (var x = 0.5; x < this.w; x += 75) {        this.context.moveTo(x, 0);        this.context.lineTo(x, this.h);        this. context.stroke();    };    for (var y = 0.5; y < this.h; y += 75) {        this.context.moveTo(0, y);        this. context.lineTo(this.w, y);        this.context.stroke();    };    this.context.closePath();    return;}window.onload= function () {    var leftgrid=new drawGrid("ecg1");}window.onresize= function () {    var leftgrid=new drawGrid("ecg1");}

0 0