Question

我正在尝试在如下图所示的画布中创建一个米老鼠图片。但我可以管理的是使用javascript和html5

＆＃13;

<html>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

  <script>
    function draw_bordered_rect(context, x, y, w, h) {
var colors = ['grey','red','black','green','orange','purple','yellow'];      
context.rect(x, y, w, h);
      context.fillStyle = "green";
      context.fill();

      context.lineWidth = 3;
      context.strokeStyle = "lightblue";
      context.stroke();
canvasContext.font = '25pt Arial';
      canvasContext.textAlign = 'center';
canvasContext.fillStyle = colors[x];
  //canvasContext.fillStyle = "black";
    canvasContext.fillText('ACTIVITY 1',canvas.width/2-2, 56);
       
    }



    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      canvasContext.fillStyle = 'white';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

   

      draw_bordered_rect(canvasContext, 0, 0, 790, 70);
      draw_bordered_rect(canvasContext, 0, 520, 790, 70);
    
   

canvasContext.fillStyle = 'grey';
	canvasContext.fillRect(20, 150, 40, 40);
canvasContext.fillStyle = 'orange';
	canvasContext.fillRect(20, 200, 40, 40);
canvasContext.fillStyle = 'purple';
	canvasContext.fillRect(20, 250, 40, 40);
canvasContext.fillStyle = 'magenta';
	canvasContext.fillRect(20, 300, 40, 40);

     

canvasContext.fillStyle = 'red';
	canvasContext.fillRect(70, 150, 40, 40);
canvasContext.fillStyle = 'green';
	canvasContext.fillRect(70, 200, 40, 40);
canvasContext.fillStyle = 'blue';
	canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'yellow';
	canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'black';
	canvasContext.fillRect(70, 300, 40, 40);



    }

  </script>

</html>

＆＃13;

现在我的问题是如何使用html5将mickey鼠标图片添加到画布中？

Answer 1

只需在 window.onload

中添加以下代码即可

    base_image = new Image();
    base_image.src = 'pic1.png';
    base_image.onload = function(){
        canvasContext.drawImage(base_image, 100, 100);
    }

这是一个有效的解决方案。希望它有所帮助！

function draw_bordered_rect(context, x, y, w, h) {
        var colors = ['grey','red','black','green','orange','purple','yellow'];
        context.rect(x, y, w, h);
        context.fillStyle = "green";
        context.fill();

        context.lineWidth = 3;
        context.strokeStyle = "lightblue";
        context.stroke();
        canvasContext.font = '25pt Arial';
        canvasContext.textAlign = 'center';
        canvasContext.fillStyle = colors[x];
        //canvasContext.fillStyle = "black";
        canvasContext.fillText('ACTIVITY 1',canvas.width/2-2, 56);

    }

    window.onload = function() {
        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(0, 0, canvas.width, canvas.height);

        base_image = new Image();
        base_image2 = new Image();
        base_image.src = 'https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png';
        base_image2.src = 'https://piratification.blob.core.windows.net/historyofpencils/picture-of-pink-pencil-eraser-small.jpg';
        base_image.onload = function(){
            canvasContext.drawImage(base_image, 100, 100);
        }

        base_image2.onload = function(){
            canvasContext.drawImage(base_image2, 400, 100);
        }


        draw_bordered_rect(canvasContext, 0, 0, 790, 70);
        draw_bordered_rect(canvasContext, 0, 520, 790, 70);

        canvasContext.fillStyle = 'grey';
        canvasContext.fillRect(20, 150, 40, 40);
        canvasContext.fillStyle = 'orange';
        canvasContext.fillRect(20, 200, 40, 40);
        canvasContext.fillStyle = 'purple';
        canvasContext.fillRect(20, 250, 40, 40);
        canvasContext.fillStyle = 'magenta';
        canvasContext.fillRect(20, 300, 40, 40);
        
        canvasContext.fillStyle = 'red';
        canvasContext.fillRect(70, 150, 40, 40);
        canvasContext.fillStyle = 'green';
        canvasContext.fillRect(70, 200, 40, 40);
        canvasContext.fillStyle = 'blue';
        canvasContext.fillRect(70, 250, 40, 40);
        canvasContext.fillStyle = 'yellow';
        canvasContext.fillRect(70, 250, 40, 40);
        canvasContext.fillStyle = 'black';
        canvasContext.fillRect(70, 300, 40, 40);
    }

<canvas id="gameCanvas" width="800" height="600"></canvas>

如何使用javascript在html5中绘制画布中的图片

1 个答案: