绘制图像
引入图像到canvas里的常用方法，需要以下三步基本操作
1.使用newlmageO）方法创建一个图片对象
2.给图片对象设置src属性，获得URL地址
3.图片加载完毕后，使用ctx.drawlmage（）函数将图片绘制到画布上
ctx.drawlmage（）方法
ctx.drawlmage（）函数根据参数个数不同可以绘制完整图片和切片两种。
ctx.drawlmage（image，x，y）：在指定的（x,y）位置绘制image图片
ctx.drawimage（image，x，y，width，height）：对image图片进行宽度高度的缩放
ctx.drawlmage（image，sx，sy，sWidth，sHeight，dx，dy，dwidth，dHeight：在指定的
（dx,dy）位置绘制image图片中的某一处切片，切片在原图中的起始点位置为（sx，sy），切
片的宽高为sWidth、SHeight
<!DOCTYPEhtml>
<htmllang=“en”>
<head>
<metacharset=“UTF-8”>
<metahttp-equiv=“X-UA-Compatible”content=“IE=edge”>
<metaname=“viewport”content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
border: 1pxsolidred;
background: url(images/bg.png);
}
</style>
</head>
<body>
<canvaswidth=“800”height=“600”id=“myCanvas”>
对不起，您的浏览器版本过低，请升级浏览器！
</canvas>
<script>
// 获取元素
varmyCanvas = document.getElementById(“myCanvas”);
// 需要新建一个类似PS中的画布，获取 canvas 的渲染上下文获得
varctx = myCanvas.getContext(“2d”);
// 后续所有的操作都是在上下文进行
// 1. 创建新的图片对象
varimage = newImage()
// 2. 添加 src 属性
// image.src = “images/cats.jpg”
image.src = “images/dog.jpg”
// 3. 绘制到画布之上
image.onload = function () {
// 3 个参数
// ctx.drawImage(image, 100, 100)
// 5 个参数，对图片的宽度和高度进行缩放
// ctx.drawImage(image, 100, 100, 400, 400)
// 9 个参数，可以将一个图片的切片绘制到画布上
ctx.drawImage(image, 235, 103, 150, 212, 100, 100, 150, 212)
}
</script>
</body>
</html>
