简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js的canvas中将图像填充至矩形内的问题？
PHPz
PHPz 2017-04-11 13:09:54
0
1
464

想在 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>
PHPz
PHPz

学习是最好的投资！

Antworte allen(1)
Ty80
Ty802017-04-11 13:11:54 1 Etage

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);//需要的话你自己查查怎么画成圆的
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！