想在 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>
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);//需要的话你自己查查怎么画成圆的