Canvas之使用图片

时间 2019-11-13

标签 canvas 使用图片繁體版

原文原文链接

canvas有比较强的图片操做能力。能够用于动态的图像合成或者做为图形的背景。浏览器支持任意格式如PNG、GIF、或者JPEG，你甚至能够将同一个页面中的其余canvas元素生成的图片做为图片源(toDataURL("image/png")，canvas.toDataURL('image/jpeg', quality))javascript

引用图像到canvas基本的2步html

（1）获取或者建立一个图片对象或者另外一个canvas的元素的引用做为源，也能够经过提供一个URL的方式来使用图片java

（2）使用drawImage()函数将图片绘制到画布上canvas

建立图像浏览器

var img = new Image();
img.src = "myImage.png";
drawImage();缓存

当脚本执行后，图片开始装载，若调用drawImage时，图片没有装载完，那什么都不会发生（有些旧的浏览器可能会抛出异常），所以应该用load事件来保证不会在加载完毕以前使用这个图片，上面的代码改为服务器

var img = new Image(); // 建立img元素
img.onload = function(){
// 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址函数

除了设置图片源地址还能够使用Base64编码的字符串的格式来定义一个图片编码

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAA url

其优势是图片内容即时可用，无需再到服务器兜一圈，缺点是图像无法缓存，图片大的话内嵌的url数据会至关的长

在画布上绘制图片

一旦得到了源图对象，咱们就能够使用drawImage方法将它渲染到canvas里。drawImage方法有3种状态，下面是最基础的一种

drawImage(image,x,y) //x和y是其在目标canvas里的起始坐标

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
    img.src = 'images/backdrop.png';
  }

第二种是能够缩放

drawImage(image, x, y, width, height) //增长的width和height是用来控制当向canvas画入时应该缩放的大小

function draw(){
  var ctx = document.getElementById("canvas").getContext("2d");
  var img = new Image();
  img.onload = function(){
    for(var i =0;i<4;i++){
        for(var j =0;j<5;j++){
          ctx.drawImage(img,j*100,i*100,100,100)
        }
    }
  }
  img.src = "images/avatar.png"
}

第三种是比较复杂的切片Slicing

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第一个参数是跟其余2个是同样的，后面的8个参数参照下图

<body>
    <img src="images/test.jpg" alt="" style="display:none" id="source">
    <img src="images/testframe.png" alt="" style="display:none" id="frame">
    <canvas id="canvas" width="600" height="400" style="background:pink;"></canvas>
    <script>
    function draw() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(document.getElementById("source"), 80, 80, 240, 240, 22, 21, 240, 240);
        ctx.drawImage(document.getElementById("frame"), 0, 0);
    }
    draw()
    </script>
</body>

最后还有一种比较简单的将图片绘制到canvas的方法 图案样式 Patterns

createPattern(image, type)

该方法接受两个参数。Image 能够是一个 Image 对象的引用，或者另外一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

function draw(){
  var ctx = document.getElementById("canvas").getContext("2d");
  var image = new Image();
  image.src = "images/avatar.png";
  image.onload = function(){
    var pattern = ctx.createPattern(image,"no-repeat");
	ctx.fillStyle = pattern;
	ctx.fillRect(0,0,600,300)
  }
}
draw()