холст drawImage не рендеринг img в соответствии с заданным размером

Question

холст drawImage не рендеринг img в соответствии с заданным размером

element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body. Let us understand this with an example This is paragraph in first div This is a paragraph This is paragraph in second div First Item Second Item This is label inside Unordered List **This above html will look like this.**

Now suppose We have to style Second Item in UnOrderd list.
In this case we can use nth-of-type(index) selector wrt DOM body.

we can achieve styling like this



explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it .

Final Code :



     
            
                
            
            
              
                 This is paragraph in first div
               
                This is a paragraph 
              
              
                This is paragraph in second div
                
                First Item
                Second Item
                
                  This is label inside Unordered List
                

              

               
            
        

**And Final output will look like this**

0

javascript html canvas html5-canvas

задан Rhushikesh 24 February 2019 в 14:54

2 ответа

Другие вопросы по тегам:

javascript html canvas html5-canvas

Похожие вопросы:

score 0 · Answer 1

Я изменил цикл, в котором вы создаете холсты.

for (let i = 0; i < 4; i++) {
    let canvas = document.createElement("canvas")
    canvas.width=400, canvas.height=400;
    canvas.setAttribute('class', 'can' + i );
    let context = canvas.getContext('2d');
    let img = make_base(context, 'https://via.placeholder.com/600/92c952');
    $("#canvasContainer").append(canvas);
    addEvent(canvas, img)

}


function make_base(context, url) {
    base_image = new Image();
    base_image.src = url;
    base_image.onload = function () {
        context.drawImage(this, 0, 0, this.width, this.height, 10, 10, 100, 100);
    }

    return base_image;
}


function addEvent(canvas, img) {
    var ctx = canvas.getContext("2d");
    var canvasWidth;
    var canvasHeight;
    var isDragging = false;
    var offsetX;
    var offsetY;

    function handleMouseDown(e) {
        setOffset(e, 1);
        isDragging = true;
    }

    function handleMouseUp(e) {
        isDragging = false;
    }

    function handleMouseOut(e) {
        isDragging = false;
    }

    function handleMouseMove(e) {
        if (isDragging) {
            // setOffset(e, 3);
            canMouseX = parseInt(e.clientX - offsetX);
            canMouseY = parseInt(e.clientY - offsetY);
            console.log(e.clientX, offsetX, e.clientX - offsetX)
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            //ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2);

            ctx.drawImage(img, 0, 0, img.width, img.height, canMouseX / 2, canMouseY / 2, 100, 100);

        }
    }

    function setOffset(e, n) {
        canvasWidth = $(e.target).width();
        canvasHeight = $(e.target).height();

        canvasOffset = $(e.target).offset();
        offsetX = canvasOffset.left;
        offsetY = canvasOffset.top;

    }
    $(canvas).mousedown(function (e) { handleMouseDown(e); });
    $(canvas).mousemove(function (e) { handleMouseMove(e); });
    $(canvas).mouseup(function (e) { handleMouseUp(e); });
    $(canvas).mouseout(function (e) { handleMouseOut(e); });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row" id="canvasContainer"> </div>
</div>

score 0 · Answer 2

Пожалуйста, прочитайте CanvasRenderingContext2D.drawImage () на MDN

Попробуйте также поиграть с dWidth и dHeight.

Это дало правильные рамки в моем тесте:

context.drawImage(this, 0, 0, this.width, this.height, 10, 10, this.width /2, this.height/4);