Make HTML Canvas generate PDF-ready Line art?

问题

I have an HTML/JavaScript program that uses the HTML5 canvas to generate a pretty graph:

I want to include this graph in a book that I'm producing with LaTeX. Unfortunately, when I print this page to PDF, I get a bitmap—presumably because canvas is a bitmap.

I just checked and apparently if I had developed this with SVG instead of with HTML5 canvas I would be good to go. But I didn't. So is there any way to generate line art from HTML5 Canvas, or should I just bite the bullet and re-implement this as SVG?

(I used canvas instead of svg because I thought that Canvas was preferred, more-modern, and more efficient. Was I mistaken?)

EDIT: Here is my JavaScript for drawing each arrow. I believe that I can readily port this to SVG using svg.js

    /* Draw a Piece at its rotation at the position row,col */
    drawRotatedPiece(p) {
        let x = this.x(p.col);
        let y = this.y(p.row);
        this.ctx.beginPath();
        this.ctx.save();
        this.ctx.translate( x, y);
        this.ctx.fillStyle='white';
        this.ctx.fillRect( -this.radius, -this.radius, this.radius*2, this.radius*2 );
        this.ctx.rotate( p.angle * Math.PI / 180);
        this.ctx.moveTo( 0, -this.radius );
        this.ctx.lineTo( -this.radius, 0 );
        this.ctx.lineTo( +this.radius, 0 );
        this.ctx.closePath( );
        this.ctx.fillStyle='black';
        this.ctx.fill();
        this.ctx.fillRect( -this.radius/2.0, 0, this.radius, this.radius*2/3.0 );
        this.ctx.restore();

    }

回答1:

The following is code that generates SVG that reproduces the rotated piece you have given in your question. The method is drawRotatedPiece(x, y, radius, angle).

// Generate a SVG path command
function xycmd(cmd,x,y){
 return cmd+ x + " " + y;
}

function rectpathxy(x,y,w,h){
   return xycmd("M", x, y) +
          xycmd("L", x+w, y) +
          xycmd("L", x+w, y+h) +
          xycmd("L", x, y+h) +
          "Z";
}

function drawRotatedPiece(x, y, radius, angle){
  trans=[];
  svg="";
  svg+="<path style='stroke:red;fill:white'";
  svg+=" transform='translate("+x+","+y+")'";
  svg+=" d='";
  svg+=rectpathxy(-radius, -radius, radius*2, radius*2);
  svg+="'/>";
  svg+="<path style='stroke:none;fill:black'";
  svg+=" transform='translate("+x+","+y+") rotate("+angle+")'";
  svg+=" d='";
  var w=radius;
  var h=radius*2/3.0;
  svg+= xycmd("M", 0, -radius) +
        xycmd("L", -radius, 0) +
        xycmd("L", +radius, 0) +
        "Z" +
        xycmd("M", x,     y) +
        xycmd("L", x+w,   y) +
        xycmd("L", x+w, y+h) +
        xycmd("L", x,   y+h) +
        "Z";
  svg+="'/>";
  return svg;
}

In case you need to generate any other graphics in SVG format (especially simple graphics like yours that are just a bunch of stroked and filled paths), my note on the Essentials of SVG may help you translate those graphics to SVG.

来源：https://stackoverflow.com/questions/65417174/make-html-canvas-generate-pdf-ready-line-art

标签

javascript

svg

canvas

html5-canvas

svg.js