在Canvas中，我们不仅可以绘制各种形状的图形，还可以将图片导入到Canvas中进行各种操作，例如平铺、切割、像素处理等。
在开发Canvas游戏时，游戏中的地图、背景、人物、物品等都不是用Canvas绘制出来的，而是用图片来实现的。
本节示例也是写在vue搭建的项目里的，先把组件基本代码贴到这里，具体图片操作的代码在后面每个点里面附带：
代码语言：javascript复制my-canvas-img.vue
<template>
<div class="container">
<div class="opt-btn">
<el-button type="primary" size="mini" v-for="(item, index) in optBtnData" :key="index" @click="item.clickBtnFunc">{{item.text}}</el-button>
</div>
<img ref="myImg" src="../images/flower.jpg" v-show="false">
<canvas ref="myCanvas" class="my-canvas"></canvas>
</div>
</template>
<script>
export default {
data(){
return {
cnvObj: null,//canvas对象
cxtObj: null,//上下文环境对象
imgObj: null, //图片对象
optBtnData: [// 操作按钮数据
{text: '绘制图片', clickBtnFunc: () => { this.drawImg()}},
{text: '平铺图片', clickBtnFunc: () => { this.tileImg()}},
{text: '切割图片', clickBtnFunc: () => { this.clipImg()}},
{text: '图片结合文字', clickBtnFunc: () => { this.imgInText()}},
{text: '图片结合图形', clickBtnFunc: () => { this.imgInGraph()}},
],
}
},
mounted(){
this.initData();
},
methods: {
//初始化数据
initData(){
this.cnvObj = this.$refs.myCanvas;
this.cxtObj = this.cnvObj.getContext('2d');
this.imgObj = this.$refs.myImg;
},
//绘制图片
drawImg(){
},
//平铺图片
tileImg(){
},
//切割图片
clipImg(){
},
//图片结合文字
imgInText(){
},
//图片结合图形
imgInGraph(){
}
}
}
</script>
<style scoped>
.my-canvas {
border: 1px dashed #000;
}
.el-button {
margin: 0 0 10px 10px;
}
</style>3.1 绘制图片
所谓的绘制图片，其实就是把一张图片在Canvas中显示出来。
3.1.1 绘制一张图片
语法：
代码语言：javascript复制//image：表示页面中的图片
//dx、dy：表示图片左上角的横坐标和纵坐标
drawImage(image, dx, dy)示例代码：
代码语言：javascript复制//绘制图片
drawImg(){
this.cxtObj.drawImage(this.imgObj, 50, 60);
},示例效果：
3.1.2 绘制大小不一样的图片
语法：
代码语言：javascript复制//image：表示页面中的图片
//dx、dy：表示图片左上角的横坐标和纵坐标
//dw、dh:定义图片的宽度和高度
drawImage(image, dx, dy, dw, dh)示例代码：
代码语言：javascript复制//绘制图片
drawImg(){
this.cxtObj.drawImage(this.imgObj, 20, 20, 180, 120);
},示例效果：
3.1.3 部分图像复制到画布
语法：
代码语言：javascript复制//image：表示页面中的图片
//sx、sy：表示源图片被截取部分饿横坐标和纵坐标
//sw、sh：表示源图片被截取部分的宽度和高度
//dx、dy：表示图片左上角的横坐标和纵坐标
//dw、dh:定义图片的宽度和高度
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);示例代码：
代码语言：javascript复制//绘制图片
drawImg(){
this.cxtObj.drawImage(this.imgObj, 200, 50, 180, 180, 80, 15, 120, 120);
},示例效果：
3.2 平铺图片
语法：
代码语言：javascript复制//image：表示被平铺饿图片对象
//type：表示图片平铺方式
//type取值：no-repeat、repeat-x、repeat-y、repeat
let pattern = cxt.createPattern(image, type);
cxt.fillStyle = pattern;
cxt.fillRect();createPattern()方法一般用于背景图片纹理的平铺，也可用于平铺其他canvas元素：
代码语言：javascript复制//平铺图片
tileImg(){
//创建canvas元素
let bgCanvas = document.createElement('canvas');
bgCanvas.width = 20;
bgCanvas.height = 20;
//在新创建的canvas中画一个圆
let bgCxt = bgCanvas.getContext('2d');
bgCxt.beginPath();
bgCxt.arc(10, 10, 10, 0, 360 * Math.PI / 180);
bgCxt.fillStyle = '#3f70e8';
bgCxt.fill();
// 平铺canvas
let pattern = this.cxtObj.createPattern(bgCanvas, 'repeat-x');
this.cxtObj.fillStyle = pattern;
this.cxtObj.fillRect(0, 0, 300, 100);
}示例效果：
3.3 切割图片
一般需要以下三步：
1）绘制基本图形；
2）使用clip()方法；
3）绘制图片。
示例代码：
代码语言：javascript复制//切割图片
clipImg(){
//1.绘制基本图形用来切割
this.cxtObj.beginPath();
this.cxtObj.arc(240, 90, 60, 0, 360 * Math.PI / 180);
this.cxtObj.closePath();
this.cxtObj.stroke();
//2.使用clip()方法使得切割区域为上面绘制的基本图形
this.cxtObj.clip();
//3.绘制一张图片
this.cxtObj.drawImage(this.imgObj, 0, 0);
}示例效果：
我们可以用任意形状的图形去切割区域，clip()方法不仅可以用于切割图片，也可以为canvas划分一个显示区域。
3.4 图片结合文字
示例代码：
代码语言：javascript复制//图片结合文字
imgInText(){
let text = '我爱花花';
this.cxtObj.font = 'bold 70px 微软雅黑';
let pattern = this.cxtObj.createPattern(this.imgObj, 'no-repeat');
this.cxtObj.fillStyle = pattern;
this.cxtObj.fillText(text, 10, 90);
},示例效果：
3.5 图片结合图形
示例代码：
代码语言：javascript复制//图片结合图形
imgInGraph(){
this.cxtObj.beginPath();
this.cxtObj.arc(240, 90, 60, 0, 360 * Math.PI / 180);
this.cxtObj.closePath();
let pattern = this.cxtObj.createPattern(this.imgObj, 'no-repeat');
this.cxtObj.fillStyle = pattern;
this.cxtObj.fill();
}示例效果：
