Rumah >hujung hadapan web >Tutorial H5 >HTML5 canvas中如何绘制图像

HTML5 canvas中如何绘制图像

不言asal: 2018-12-01 17:30:154720semak imbas

canvas是HTML5中新增的画布，那么HTML5 canvas如何绘制图像呢？本篇文章就来给大家介绍关于HTML5 canvas绘制图像的方法，下面我们来看具体的内容。

HTML5 canvas

我们先来直接看代码示例

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      var img = new Image();
      img.onload = function onImageLoad() {
        context.drawImage(img, 128, 40);
      }
      img.src = &#39;img/flower.jpg&#39;;
    }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

说明：在画布上绘图时，获取画布的上下文是一个常见的过程。

准备要在画布上绘制的图像。创建一个Image对象。

  var img = new Image();

在画布上绘制图像使用Canvas上下文的drawImage（）方法。给出X和Y坐标以将Image对象绘制为第一个参数，将图像绘制为第二个第三个参数，由于加载Image对象的图像是异步处理的，因此必须在Image对象的图像准备好的情况下绘制图像。因此，我们对Image对象的onload事件实现绘图处理，最后处理源图像的设置

img.onload = function onImageLoad() {
    context.drawImage(img, 128, 40);
  }
  img.src = &#39;img/flower.jpg&#39;;

运行结果

在Web浏览器中打开HTML文件。结果如下图所示，图像是在画布上绘制的。

HTML5 canvas

注意：在以下代码的情况下，不能保证在执行drawImage时读取Image对象的图像。因此，可能在显示图像时发生。绘制图像应该在Image对象的onload上实现。

<script type="text/javascript">    
function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
              return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      
      var img = new Image();
      img.src = &#39;img/flower.jpg&#39;;
      context.drawImage(img, 128, 40);
    }
  </script>

Atas ialah kandungan terperinci HTML5 canvas中如何绘制图像. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 html 对象事件异步 canvas

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何使用HTML5 canvas实现图像的马赛克Artikel seterusnya：HTML5 canvas如何实现马赛克的淡入淡出效果（代码）

Artikel berkaitan

Lihat lagi