HTML5+CSS3-充实笔记0611

HappyAndy_Lo

277

收藏 2019-06-11

使用图像
插入图像

使用drawImage函数直接在指定位置插入图像
var img = new Image();
img.src = "img01.png";
img.onload=function(){
ctx.drawImage(img,0,0);
};

onload事件会在图像或页面加载完成后立即发生（这个例子是解决页面加载和刷新时不显示图像的问题）

平铺图像

绘制平铺图像时，需要用到Canvas的createPattern函数（两个参数，第一个参数为平铺的图像，第二个参数确定以哪种方式进行平铺，可选为repeat水平和垂直方向的平铺；repeat-x水平方向重复；repeat-y垂直方向重复；no-repeat不重复）
完整代码：
<!DOCTYPE html>
<html>
<head>
   <title>4.6.2.html</title>
   <meta charset="utf-8">
</head>
<body>
   <canvas id="myCanvas" width="1200" height="600">your browser dont support it.</canvas>
   <script type="text/javascript">
      var image=new Image();
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      image.src="002.png";
      image.onload=function(){
         var ptrn =ctx.createPattern(image, "repeat");
         ctx.fillStyle = ptrn ;
         ctx.fillRect(0, 0, 600,600);
      };
   </script>
</body>
</html>