4回答

• 

  慕桂英1016021

  2019-05-29 17:28:06

  我是先将  canvas的大小与  图片大小调成一致   然后在渲染过后的canva用 css的手段 将其限制大小  这样就不会失帧了

  
  

  0 0
• 

  慕桂英1016021

  2019-05-29 17:25:59

  <script>
    var canvasa = document.getElementById("canvasa");
    var contexta = canvasa.getContext("2d");
  
    var canvasb = document.getElementById("canvasb");
    var contextb = canvasb.getContext("2d");
  
    var image = new Image();
    window.onload=function(){
      image.src = "img/d.jpg";
      image.onload=function(){
        canvasa.width=image.width;//这个是重点
        canvasa.height=image.width;//这个是重点
  
        canvasb.width=image.width;//这个是重点
        canvasb.height=image.width;//这个是重点
        contexta.drawImage(image, 0, 0, canvasa.width, canvasa.height)
        canvasa.style.width='600px';//这个是重点
        canvasa.style.height='600px';//这个是重点
      }
    };
  
    function fillter() {
      console.log(canvasa.style.width)
        var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
        var Data=imageData.data;
        for (var i=0;i<canvasa.width*canvasa.height;i++){
          var r=Data[4*i+0]
          var g=Data[4*i+1]
          var b=Data[4*i+2]
  
          var rgb=r*0.3+g*0.59+b*0.11
  
          Data[4*i+0]=rgb;
          Data[4*i+1]=rgb;
          Data[4*i+2]=rgb;
        }
        contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
      canvasb.style.width='600px';//这个是重点
      canvasb.style.height='600px';//这个是重点
    };
  </script>

  
  

  0 0
• 

  雪灵smile

  2017-12-26 09:23:40

  不知道我分享的这个能不能帮到你     

  0 0
• 

  雪灵smile

  2017-12-26 09:22:30

  (function($){
     var myCanvas = document.getElementById("myCanvas");
     var cxt = myCanvas.getContext("2d");
     var image = new Image();
     // polyfill 提供了这个方法用来获取设备的 pixel ratio
     var getPixelRatio = function(context) {
         var backingStore = context.backingStorePixelRatio ||
                 context.webkitBackingStorePixelRatio ||
                 context.mozBackingStorePixelRatio ||
                 context.msBackingStorePixelRatio ||
                 context.oBackingStorePixelRatio ||
                 context.backingStorePixelRatio || 1;
  
         return (window.devicePixelRatio || 1) / backingStore;
     };
  
     var ratio = getPixelRatio(cxt);
  
  
     window.onload = function(){
         image.src = "images/phone.png";
         image.onload = function(){
             // 注意，这里的 width 和 height 变成了 width * ratio 和 height * ratio
             cxt.drawImage(image, 0, 0, myCanvas.width * ratio, myCanvas.height * ratio);
         }
     };
  
  })(jQuery)

  0 0