前端-HTML5 canvas学习

Posted 2020-06-18 sunshinegirl_7

canvas元素算是html5添加的最受欢迎的功能了。它是通过在页面中设定一个区域，然后用脚本来编辑图形。

可像下面这样来引入一个canvas图像

<canvas id="myCanvas"></canvas>

<script type="text/javascript">
  var canvas = document.getElementById(‘myCanvas‘);
  var cxt = canvas.getContext(‘2d‘);

　var img = new Image();

　img.src = "flower.png";

  Image.onload = function(){cxt.drawImage(img,0,0)}　
</script>

 

在canvas里显示图片非常简单，可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令就可以轻松为canvas添加图片内容。

不过引入图片后，必须要等图片完全加载完才能对其进行操作，浏览器通常会在页面脚本执行同时异步加载图片。如果试图在图片未完全加载之前就将其呈现在canvas上，那么canvas将不会显现任何图片。因此要注意在呈现图片之前要确保图片已经加载完毕。

为了保证呈现之前图片已经加载完毕，下面用一个回调函数来使仅当图像 加载完成后才执行后续代码。

function load(){
  var ima = new Image();
  ima.src = "test.jpg";
  if (ima.complete){
    drawIma(ima);
  }
  else{
    ima.onload = function(){
      drawIma(ima);
    };
    ima.onerror = function(){
      window.alert(‘图片加载失败‘);
    };
  };
}

if (document.all){
  window.attachEvent(‘onload‘,load);
}
else{
  window.addEventListener(‘load‘,load,false);
}

canvas和SVG以及VML之间的差异：canvas使用一个基于javascript的脚本来绘图，而SVG和VML使用XML来绘图。

大多数canvas绘图都没有定义在canvas本身上，而是像上面 var cxt = canvas.getContext(‘2d‘);定义在了通过getContext（）方法获得的“绘图环境”上，这里是创建一个2d的绘图环境。

Canvas API也使用了路径的表示法，首先用beginPath()开始，用closePath()关闭一条打开的子路径。一定定义了路径，其他的方法，如fill()都是对此路径的操作。

如果画布的路径是打开的，closePath()通过添加一条线条连接当前点和子路径起始点来关闭它。如果子路径已经关闭了，这个方法不做任何事。一旦子路径闭合，就不能再为其添加更多的直线或曲线了。要继续向该路径添加，需要通过moveTo()开始一条新的子路径。

最后丢出几个canvas的小Demo.

https://github.com/SunshineLXH/examples/tree/master/canvas