HTML5 Canvas - 如何在画布上的图像上绘制矩形

更新时间：2023-11-24 09:23:10

因为您不等待图片先载入。在脚本中添加 window.onload（）

 < script> 
 window.onload = function（）{
 var c = document.getElementById（myCanvas）; 
 var ctx = c.getContext（2d）; 
 var img = document.getElementById（scream）; 
 ctx.drawImage（img，10,10）; 
 var canvas = document.getElementById（'myCanvas'）; 
 var context = canvas.getContext（'2d'）; 

 context.beginPath（）; 
 context.rect（188，50，200，100）; 
 context.fillStyle ='yellow'; 
 context.fill（）; 
 context.lineWidth = 7; 
 context.strokeStyle ='black'; 
 context.stroke（）; 
} 
< / script>

发生的是尝试在加载之前绘制图像，执行 window.onload 将在整个文档加载后调用代码（例如图像）。否则，它可能不显示图像或绘制出来。

Actually, I am able to do it using img.onload function. Something I got from 'HTML5 Canvas - How to Draw a line over an image background?'. But I need to draw image without using img from onload function which is like this:

    var imagePaper = new Image();


        imagePaper.onload = function(){


            context.drawImage(imagePaper,100, 20, 500,500);
        };

      imagePaper.src = "images/main_timerand3papers.png";
}

But I want to able draw rectangle over canvas simply attaching img src above canvas, just as:

<body>  
<img id="scream" src="my.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.</canvas>

But I'm unable to draw line over img in canvas, either img is drawing or shape is hiding behind. This is my full code:

 <!DOCTYPE html>  
 <head>  
 <title>Playing *** video on HTML5 canvas</title>  
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />  
 <style type="text/css">  
body {
        margin: 0px;
        padding: 0px;
      } 
 </style>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 </head>  
 <body>  
<img id="scream" src="my.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.</canvas>
  <script>  
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);  
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(188, 50, 200, 100);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
  </script>  
 </body>  
 </html>

Because you are not waiting for the image to load first. In your script add an window.onload()

<script>
window.onload = function() {
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var img=document.getElementById("scream");  
  ctx.drawImage(img,10,10);  
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.rect(188, 50, 200, 100);
  context.fillStyle = 'yellow';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
}
</script>

What is happening is it's trying to draw the image before it loaded, doing window.onload will call the code once the entire document is loaded (such as images). Otherwise it may display no image or draw it out of line.

上一篇 : ：如何在画布上的 Tkinter 中打开 PIL 图像下一篇 : Matlab中多列图例的代码

HTML5 Canvas - 如何在画布上的图像上绘制矩形

相关阅读

推荐文章