Question

我正在尝试根据我在下面创建的布局实现打印功能。

<html>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

  <script>
    function draw_bordered_rect(context, x, y, w, h) {
var colors = ['grey','red','black','green','orange','purple','yellow'];      
context.rect(x, y, w, h);
      context.fillStyle = "green";
      context.fill();

      context.lineWidth = 3;
      context.strokeStyle = "lightblue";
      context.stroke();
canvasContext.font = '25pt Arial';
      canvasContext.textAlign = 'center';
canvasContext.fillStyle = colors[x];
  //canvasContext.fillStyle = "black";
    canvasContext.fillText('ACTIVITY 1',canvas.width/2-2, 56);
       
    }



    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      canvasContext.fillStyle = 'white';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

   
base_image = new Image();
        base_image.src = 'http://jacobian.xyz/draw/pic1.png';
        base_image.onload = function(){
            canvasContext.drawImage(base_image, 250, 80);
        }

bases_image = new Image();
        bases_image.src = 'http://jacobian.xyz/draw/e.png';
        bases_image.onload = function(){
            canvasContext.drawImage(bases_image, 20, 400);
        }

bases1_image = new Image();
        bases1_image.src = 'http://jacobian.xyz/draw/f.png';
        bases1_image.onload = function(){
            canvasContext.drawImage(bases1_image, 250, 550);
        }

bases2_image = new Image();
        bases2_image.src = 'http://jacobian.xyz/draw/g.png';
        bases2_image.onload = function(){
            canvasContext.drawImage(bases2_image, 450, 545);
        }

bases3_image = new Image();
        bases3_image.src = 'http://jacobian.xyz/draw/h.png';
        bases3_image.onload = function(){
            canvasContext.drawImage(bases3_image, 350, 545);
        }


      draw_bordered_rect(canvasContext, 0, 0, 790, 70);
      draw_bordered_rect(canvasContext, 0, 540, 790, 70);
    
   

canvasContext.fillStyle = 'grey';
	canvasContext.fillRect(20, 150, 40, 40);
canvasContext.fillStyle = 'orange';
	canvasContext.fillRect(20, 200, 40, 40);
canvasContext.fillStyle = 'purple';
	canvasContext.fillRect(20, 250, 40, 40);
canvasContext.fillStyle = 'magenta';
	canvasContext.fillRect(20, 300, 40, 40);

     

canvasContext.fillStyle = 'red';
	canvasContext.fillRect(70, 150, 40, 40);
canvasContext.fillStyle = 'green';
	canvasContext.fillRect(70, 200, 40, 40);
canvasContext.fillStyle = 'blue';
	canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'yellow';
	canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'black';
	canvasContext.fillRect(70, 300, 40, 40);



    }

  </script>

</html>

这样当他们点击图片中的打印按钮时，就会出现打印对话框。

我认为打印功能是这样的。

function printPage()
{
	window.print();
}

任何帮助都会受到赞赏。

Answer 1

只是让按钮不属于画布。让它们成为您设置样式的普通html <a>或<button>标记的一部分。

然后将打印功能添加到这些按钮/链接上的onclick事件。

这样你也可以在CSS中隐藏它们以免打印。因此，它们不会显示在打印的最终结果上。

如何在html5中实现打印功能

1 个答案: