search

Home  >  Q&A  >  body text

javascript - js的canvas中将图像填充至矩形内的问题？

想在 arc中画一张图，用了createPattern这个填充图案的方法后，
1、当我在arc的xy坐标处变动的话，createPattern填充的图案也会跟着移动，为什么？
2、如何将createPattern填充的图案做到与在css中一样将图的宽度100%填充到相对应的的矩形中？
如图示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        canvas{
            border:1px solid #d03;
        }
        p{
            position: fixed;
            top:100px;
            left:1000px;
            width:200px;
            height:200px;
            border-radius: 50%;
            overflow: hidden;
        }
        p img{
            width:100%;
            height: 100%;
        }
    </style>
</head>
<body>
<p>
    <img src="./static/a1.jpg" alt="">
</p>
<canvas id="runCircle"></canvas>
<script>
    var rc = document.getElementById('runCircle');
    var rc2 = rc.getContext('2d');
    rc.width = document.body.clientWidth;
    rc.height = window.screen.availHeight ;
    let drawImg = new Image();
//    drawImg.crossOrigin = "Anonymous";
    drawImg.src = "https://sfault-image.b0.upaiyun.com/255/338/2553383630-57f682a80e43e_articlex";
    drawImg.onload = function(){
        var imgContext = rc2.createPattern(drawImg,"repeat");
        rc2.arc(parseInt(rc.width/2 - 100),rc.height/2,200,0,Math.PI*2);  // xy 居中 但是图案xy也会移动
        rc2.fillStyle = imgContext;
        rc2.fill();
    };

</script>
</body>
</html>
PHPzPHPz2774 days ago469

reply all(1)I'll reply

  • PHP中文网

    PHP中文网2017-04-11 13:11:54

    1.使用createPattern方法：

    drawImg.onload = function(){
    var imgContext = rc2.createPattern(drawImg,"no-repeat");
    //rc2.arc(parseInt(rc.width/2),rc.height/2,150,0,Math.PI*2);  // xy 居中 但是图案xy也会移动
    rc2.arc(150, 150, 150, 0, 2 * Math.PI);
    rc2.scale(0.45, 0.45);
    rc2.fillStyle = imgContext;
    rc2.fill();
};

    使用rc2.scale(0.45, 0.45);方法可以等比例缩小图片可以达到你的效果,但是里面的放大缩小的数值需要自己计算！！！

    还有就是// xy 居中 但是图案xy也会移动//这个问题我不是很明白

    2.使用drawImage方法可以直接缩小图片

    rc2.drawImage(drawImg, 0, 0,300,300);//需要的话你自己查查怎么画成圆的

    reply
    0
  • Cancelreply