发表新帖
发表新帖

How put percentage width into html canvas (no css)

前端 未结
关注
5 2219
旧时难觅i
旧时难觅i 2020-12-05 10:13

I have an image and have overlaid a canvas on top of it so that I can draw \'on\' the image without modifying the image itself. 



        

                      

              相关标签:
5条回答
  • 北海茫月
    2020-12-05 10:48

    You need to set the size of the canvas in pixels or you will not only reduce the quality of its content but if you want to draw on it the mouse-coordinates will be off as well. Don't use CSS to scale canvas if you're gonna use it interactively.

    I would recommend you adjust your image then adopt the canvas to whatever size the image is. You can do this by using getComputedStyle(element) which gives you whatever size the element is set to in pixels.

    After image's onload (as you need to be sure the image is actually loaded to get its size) or later if you change the image (CSS) size on the go, you can do this:

    /// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);

/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);

/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');

canvas.width = width;
canvas.height = height;

    Now the canvas will fit image but with canvas pixel ratio 1:1 to help you avoid problems when you're gonna draw on the canvas. Otherwise you will need to convert/scale the mouse / touch coordinates as well.

    0 讨论(0)
  • 情书的邮戳
    2020-12-05 10:48

    Resize Your canvas to fit Window/Browser Size :

    <script>
function resizeCanvas() {
    var canvs = document.getElementById("snow");
    canvs.width = window.innerWidth;
    canvs.height = window.innerHeight;
}
</script>

<body onload="resizeCanvas();">
    <canvas id="snow" ></canvas>
</body>
    0 讨论(0)
  • 予麋鹿
    2020-12-05 11:03

    Instead of using width="", use style="" as such

    <canvas id="sketchpad" style="width:70%; height:60%" >Sorry, your browser is not supported.</canvas>

    EDIT:

    <div class="needPic" id="container" style="width:70%; height:60%; min-width:__px; min-height:__px">
    <img id="image" src="" style="width:70%; height:60%; min-width:__px; min-height:__px"/>
    <!-- Must specify canvas size in html -->
    <canvas id="sketchpad" style="width:70%; height:60%; min-width:__px; min-height:__px>Sorry, your browser is not supported.</canvas>
</div>
    0 讨论(0)
  • 后悔当初
    2020-12-05 11:04

    Set the canvas height to the window's innerHeight and the width to the window's innerWidth:

    canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

    If you want a specific percentage, multiply them by the percentage. Example:

    //25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
    0 讨论(0)
  • 庸人自扰
    2020-12-05 11:11

    You could resize the canvas to fit the width of the image in pixels via JavaScript. Since you're using a canvas you are probably using JavaScript already so this should not be a problem.

    See Resize HTML5 canvas to fit window, although not identical, a similar solution should work.

    0 讨论(0)
 看不清?
提交回复
热议问题