Question

我正在尝试调整大小以正确定位中间位置和更大的div。我希望它是500x500。我要做的是做一个Windows Paint的经典版本。

问题是调整'画布'到中间停止画笔'画'。

这是我到目前为止的代码。

<!DOCTYPE HTML>
<html>
  <head>
    <style>

    body {
    width: 500px;
    height: 500px;
    margin: auto;
    top: 50%; 
    left: 50%;
    width: 90%;
    border: 3px solid #73AD21;
    padding: 10px;

      }

    </style>
  </head>
  <body>
    <div id="paint" >
        <canvas id="myCanvas"></canvas>
    </div>
    <script>


var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';

canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);

canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

    </script>
  </body>
</html>

Answer 1

摆脱body上的样式并将其替换为：

#paint {
  height: 500px;
  margin: auto;
  width: 90%; /* you also had width: 500px, which one did you want? */
  border: 3px solid #73AD21;
  padding: 10px;
}

Fiddle - 看起来这个改变正常。

HTML Canvas和一个小问题正确显示？

1 个答案: