HTMLキャンバスと少し問題が正しく表示されていますか？

サイズを調整して、中央とより大きなdivの位置が正しくなるようにしています。私はそれが500x500になりたいです。私がしようとしているのは、Windows Paintの古典版です。HTMLキャンバスと少し問題が正しく表示されていますか？

問題は、 'キャンバス'を中央に調整することで、ペイントブラシが '描画'するのを止めることです。

ここはコードですが、これまでのところあります。

<!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>

出典

2016-03-27 chatlover

なぜ 'body'の中で' div'や 'canvas'の代わりに' body'要素をスタイリングしていますか？ –

は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 - それはその変化に大丈夫働いているように見えます。

出典

2016-03-27 01:26:16

HTMLキャンバスと少し問題が正しく表示されていますか？

答えて

関連する問題