Question

我正在尝试创建各种各样的旋转轮，其中图像显示为奖品。我重复使用我在网上找到的一个项目，而且我对画布很新，所以我很感激一些帮助。

enter image description here

这就是它的外观，这里将在每个字段中显示一个图像，其角度与车轮相匹配。以下是生成它的代码：

            var outsideRadius = 210;
        var textRadius = 160;
        var insideRadius = 155;

        ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,500,500);

        ctx.strokeStyle = "#943127";
        ctx.lineWidth = 4;

        for(var i = 0; i < 12; i++) {
            var angle = startAngle + i * arc;
            ctx.fillStyle = '#a9382d';
            ctx.beginPath();
            ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
            ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }

在上面的每个字段中，应显示来自阵列的奖品图像。我在字段中绘制图像时遇到问题。我没有运气就尝试过使用createPattern（）。

编辑：添加了jsfiddle：http://jsfiddle.net/46k72m7z/

Answer 1

enter image description here

要在其中一个车轮楔块内剪切图像：

见下图。

计算指定楔形的4个顶点。
使用context.beginPath开始新路径并转到point0。
从point0到point1画一条线。
从point1到point2绘制弧。
从第2点到第3点画一条线。
从point3绘制弧线返回point0。
关闭路径（不需要，只是要格外小心）。
调用context.clip()创建楔形的剪裁区域。

enter image description here

以适当的角度绘制图像

见下图。

找到楔形的中心点。
使用context.translate将画布原点设置为该中心点。
计算从车轮中心（下面的＃1点）到楔形中心的角度。
按计算的角度旋转画布。
将图像偏移一半的图像宽度＆amp;高度。这会使图像在楔形内部以视觉方式居中。

enter image description here

其他有用信息

使用context.clip设置剪辑时，撤消该剪辑的唯一方法是将剪辑包裹在context.save和context.restore之间。（或者调整画布大小，但是当您尝试绘制多个剪切区域时会产生反效果，因为在调整画布大小时会删除所有内容）。
```
// save the begininning unclipped context state
context.save();

... draw your path

// create the clipping area
context.clip();

... draw the image inside the clipping area

// restore the context to its unclipped state
context.restore();
```
要将图像居中放置在任何位置，找到您希望图像居中的中心点，然后将图像偏移一半的宽度＆amp;身高：
```
ctx.drawImage( img,-img.width/2, -img.height/2 );
```

计算圆周上的点：

// given...
var centerX=150;  // the circle's center
var centerY=150;
var radius=25;    // the circle's radius
var angle=PI/2;   // the desired angle on the circle (angles are expressed in radians)

var x = centerX + radius * Math.cos(angle);
var y = centerY + radius * Math.sin(angle);

效率： path命令会自动从上一个命令的端点画一条线到你新命令的起始点。因此，您可以跳过步骤＃3＆amp;步骤＃5，因为绘制圆弧时将自动绘制线条。

示例代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var PI=Math.PI;
var cx=250;
var cy=250;      
var outsideRadius = 210;
var textRadius = 160;
var insideRadius = 155;
var wedgecount=12;
var arc=Math.PI*2/wedgecount;
var startAngle=-arc/2-PI/2;

var mm=new Image;
mm.onload=start;
mm.src='https://dl.dropboxusercontent.com/u/139992952/multple/mm1.jpg';
var goldCar=new Image();
goldCar.onload=start;
goldCar.src='https://dl.dropboxusercontent.com/u/139992952/multple/carGold.png';
var redCar=new Image();
redCar.onload=start;
redCar.src='https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png';
var imgCount=2;
function start(){
  if(++imgCount<2){return;}
  drawWheel();
  for(var i=0;i<wedgecount;i++){
    var img=(i%2==0)?goldCar:redCar;
    if(i==3){img=mm;}
    clipImageToWedge(i,img);
  }
}

function drawWheel(){
  ctx.clearRect(0,0,500,500);
  ctx.lineWidth = 4;
  for(var i = 0; i < 12; i++) {
    var angle = startAngle + i * arc;
    ctx.fillStyle = '#a9382d';
    ctx.beginPath();
    ctx.arc(cx,cy, outsideRadius, angle, angle + arc, false);
    ctx.arc(cx,cy, insideRadius, angle + arc, angle, true);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
  }
}

function clipImageToWedge(index,img){
  var angle = startAngle+arc*index;
  var angle1= startAngle+arc*(index+1);
  var x0=cx+insideRadius*Math.cos(angle);
  var y0=cy+insideRadius*Math.sin(angle);
  var x1=cx+outsideRadius*Math.cos(angle);
  var y1=cy+outsideRadius*Math.sin(angle);
  var x3=cx+outsideRadius*Math.cos(angle1);
  var y3=cy+outsideRadius*Math.sin(angle1);

  ctx.save();
  ctx.beginPath();
  ctx.moveTo(x0,y0);
  ctx.lineTo(x1,y1);
  ctx.arc(cx,cy,outsideRadius,angle,angle1);
  ctx.arc(cx,cy,insideRadius,angle1,angle,true);
  ctx.clip();
  var midRadius=(insideRadius+outsideRadius)/2;
  var midAngle=(angle+angle1)/2;
  var midX=cx+midRadius*Math.cos(midAngle);
  var midY=cy+midRadius*Math.sin(midAngle);

  ctx.translate(midX,midY);
  ctx.rotate(midAngle+PI/2);
  ctx.drawImage(img,-img.width/2,-img.height/2);

  ctx.restore();
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<canvas id="canvas" width=500 height=500></canvas>

＆＃13;

画布将图像放在形状中

1 个答案: