时间戳

首页 > 解决方案 > Increase HTML5 Canvas Resolution

javascript - Increase HTML5 Canvas Resolution

问题描述

I have tried everything I saw in here, but nothing seems to work on my code, or maybe I just don't know how to apply it.

I am trying to get a better resolution in my html canvas, because the rectangles look a little bit "blurred".

Here's my code: html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Resize</title>
    <style>
        canvas {
            border: 1px solid black;
        }

        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <canvas id="sig-canvas" width="1280" height="739"></canvas>
    <p id="timer"></p>
    <script src="canvas.js"></script>
</body>
</html>

javascript:

var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");

var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
  mousePos = getMousePos(canvas, e);
    drawing = true;
}, false);

// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: mouseEvent.clientX - rect.left,
    y: mouseEvent.clientY - rect.top
  };
}

// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || 
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimaitonFrame ||
           function (callback) {
        window.setTimeout(callback, 1000/60);
           };
})();

// Draw to the canvas
function renderCanvas() {
  if (drawing) {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(mousePos.x, mousePos.y, 25, 25);

    ctx.strokeStyle = "#000000";
    ctx.lineWidth   = 2;
    ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
    lastPos = mousePos;
  }
}

// Allow for animation
(function drawLoop () {
  requestAnimFrame(drawLoop);
  renderCanvas();
})();

Here's my fiddle: https://jsfiddle.net/8cp5qmob/

Thank you!

标签： javascripthtmlhtml5-canvas

解决方案

为了提高画布的分辨率，我将 CSS（对于它在屏幕上占用的像素数）canvas.width和canvas.height（对于它内部使用的像素数）进行了很好的混合。它看起来像这样：

CSS：

#sig-canvas {
     width: 1280px;
     height: 739px;
 }

JavaScript：

var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d")
var scale = 2;
canvas.width = 1280 * scale;
canvas.height = 739 * scale;

使用这种技术的棘手之处在于，在屏幕坐标到画布坐标之间转换时，您必须乘以或除以比例。在这种情况下，我将屏幕坐标转换为画布坐标getMousePos：

function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: (mouseEvent.clientX - rect.left) * scale,
    y: (mouseEvent.clientY - rect.top) * scale
  };
}

这是一个片段，它显示了所有这些：

var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d")
var scale = 2;
canvas.width = 1280 * scale;
canvas.height = 739 * scale;

var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
  mousePos = getMousePos(canvas, e);
    drawing = true;
}, false);

// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: (mouseEvent.clientX - rect.left) * scale,
    y: (mouseEvent.clientY - rect.top) * scale
  };
}

// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || 
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimaitonFrame ||
           function (callback) {
        window.setTimeout(callback, 1000/60);
           };
})();

// Draw to the canvas
function renderCanvas() {
  if (drawing) {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(mousePos.x, mousePos.y, 25, 25);

    ctx.strokeStyle = "#000000";
    ctx.lineWidth   = 2;
    ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
    lastPos = mousePos;
  }
}

// Allow for animation
(function drawLoop () {
  requestAnimFrame(drawLoop);
  renderCanvas();
})();
#sig-canvas {
  width: 1280px;
  height: 739px;
}
canvas {
    border: 1px solid black;
}

body {
    margin: 0px;
}
<canvas id="sig-canvas"></canvas>

推荐阅读