如何在HTML5画布中绘制和旋转图像以及文本

1 回答

• 0

  Problem

  在你的 img.onload 功能中，你是_x438383_你的中心X和中心 .

  ctx.translate(centerX,centerY) 将画布的[0,0]原点移动到[centerX，centerY] .

  因此，当你绘制你的图像时，你真的是双重移动 .

  因此，您的图像实际上是在 [ centerX*2, centerY*2 ] 绘制的 .

  A additional thought: Preload your images

  最好预加载所有图像 . 这样，如果图像无法加载，您可以在开始绘制轮子之前采取修复操作 .

  以下是如何预加载所有图像，以便在需要将它们绘制到轮子上时可用：

  // your incoming JSON 
  var prizesJSON='[{"product":"Axe FX","img":"https://mdn.mozillademos.org/files/5395/backdrop.png"},{"product":"Musicman JPX","img":"https://mdn.mozillademos.org/files/5395/backdrop.png"},{"product":"Ibanez JEM777V","img":"https://mdn.mozillademos.org/files/5395/backdrop.png"}]';
  
  // the JSON converted to a JS array of objects
  var prizes=JSON.parse(prizesJSON);
  
  // preload all images
  var imageURLs=[];  
  var imgs=[];
  var imagesOK=0;
  // add prize images into the image preloader
  for(var i=0;i<prizes.length;i++){
    imageURLs.push(prizes[i].img);
  }
  startLoadingAllImages(imagesAreNowLoaded);
  //
  function startLoadingAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
      var img = new Image();
      imgs.push(img);
      img.onload = function(){ 
        imagesOK++; 
        if (imagesOK>=imageURLs.length ) {
          callback();
        }
      };
      img.onerror=function(){alert("image load failed");} 
      img.src = imageURLs[i];
    }      
  }
  // 
  function imagesAreNowLoaded(){
    // add the img objects to your prizes array objects
    for(var i=0;i<prizes.length;i++){
      prizes[i].imageObject=imgs[i];
      // just testing (add the img to the DOM)
      document.body.appendChild(imgs[i]);
    }
    // All images are fully loaded
    // So draw your wheel now!
  }
  

  body{ background-color: ivory; }
  

  <h4>Testing: (1) Preload all images, (2) Add imgs to DOM</h4>
  

  I had this laying around...

  我看到你已经有代码来绘制你的Wheel了，但是我的代码存档中有这个代码所以我在这里提供它以防万一它对你有用 .

  以下是如何使用包含奖品图像和文字的每个刀片绘制“财富之轮”的示例 . 使用的技术包括：

  • context.translate 将旋转点设置为车轮中心 .

  • context.rotate 将每个刀片旋转到所需的角度 .

  • context.textAlign ＆ context.textBaseline 绘制居中文字 .

  • context.globalAlpha 减轻每个刀片的颜色，使黑色文字具有良好的对比度 .

  

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  var cw=canvas.width;
  var ch=canvas.height;
  
  var PI=Math.PI;
  var PI2=PI*2;
  var bladeCount=10;
  var sweep=PI2/bladeCount;
  var cx=cw/2;
  var cy=ch/2;
  var radius=130;
  
  var img=new Image();
  img.onload=start;
  img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";
  function start(){
      for(var i=0;i<bladeCount;i++){
          drawBlade(img,'House'+i,cx,cy,radius,sweep*i,sweep);
      }    
  }
  
  function drawBlade(img,text,cx,cy,radius,angle,arcsweep){
      // save the context state 
      ctx.save();
      // rotate the canvas to this blade's angle
      ctx.translate(cx,cy);
      ctx.rotate(angle);
      // draw the blade wedge
      ctx.lineWidth=1.5;
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.arc(0,0,radius,0,arcsweep);
      ctx.closePath();
      ctx.stroke();
      // fill the blade, but keep the color light
      // so the black text has good contrast
      ctx.fillStyle='white';
      ctx.fill();
      ctx.fillStyle=randomColor();
      ctx.globalAlpha=0.30;
      ctx.fill();
      ctx.globalAlpha=1.00;
      // draw the text
      ctx.rotate(PI/2+sweep/2);
      ctx.textAlign='center';
      ctx.textBaseline='middle';
      ctx.fillStyle='black';
      ctx.fillText(text,0,-radius+50);
      // draw the img 
      // (resize to 32x32 so be sure orig img is square)
      ctx.drawImage(img,-16,-radius+10,32,32);
      // restore the context to its original state
      ctx.restore();
  }
  
  function randomColor(){ 
      return('#'+Math.floor(Math.random()*16777215).toString(16));
  }
  

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

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

  回复于 2024-05-19T08:59:02+08:00