javascriptを使ってhtml5でキャンバスに絵を描く方法

私はキャンバスにミッキーマウスの絵を作成しようとしています。私が管理できるすべては今、私の質問は、私はキャンバスにミッキーマウスの絵を追加することができますどのようにHTML5を使用しているJavaScriptとHTML5 javascriptを使ってhtml5でキャンバスに絵を描く方法

<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'; 
 
\t canvasContext.fillRect(20, 150, 40, 40); 
 
canvasContext.fillStyle = 'orange'; 
 
\t canvasContext.fillRect(20, 200, 40, 40); 
 
canvasContext.fillStyle = 'purple'; 
 
\t canvasContext.fillRect(20, 250, 40, 40); 
 
canvasContext.fillStyle = 'magenta'; 
 
\t canvasContext.fillRect(20, 300, 40, 40); 
 

 
     
 

 
canvasContext.fillStyle = 'red'; 
 
\t canvasContext.fillRect(70, 150, 40, 40); 
 
canvasContext.fillStyle = 'green'; 
 
\t canvasContext.fillRect(70, 200, 40, 40); 
 
canvasContext.fillStyle = 'blue'; 
 
\t canvasContext.fillRect(70, 250, 40, 40); 
 
canvasContext.fillStyle = 'yellow'; 
 
\t canvasContext.fillRect(70, 250, 40, 40); 
 
canvasContext.fillStyle = 'black'; 
 
\t canvasContext.fillRect(70, 300, 40, 40); 
 

 

 

 
    } 
 

 
    </script> 
 

 
</html>

を用いて、以下のでしょうか？

出典

2017-01-15 Anonymous

-1

ただ、ここでワーキングソリューションだ

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

あなたwindow.onloadに次のコードを追加します。それが役に立てば幸い！それは美しく働く

出典

2017-01-15 04:17:41 HenryDev

も感謝します。 –

btw消しゴムの別のイメージを追加したいのですが？ –

あなたのコードに基づいて消しゴムの別のイメージを追加すると、ミッキーマウスのイメージは消しゴムに置き換えられます。なぜ2つの画像が共存できないのですか？ –

javascriptを使ってhtml5でキャンバスに絵を描く方法

答えて

関連する問題