canvas的drawImage（）⽅法
canvas的drawImage()是提供了更多的在canvas上绘制图像的⽅法，使⽤drawImage()⽅法可以在画布上绘制图像，其他画布的内容，视频的某⼀帧的图像等，也可以裁剪画其中的⼀部分。
⼀、drawImage()语法
drawImage(image，sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)；
⼆、参数
1、image：image是画布绘制的图像源，绘制到画布上的元素，可以是canvasElement,imageElement,svgImageElement
,videoElement等⼀系列具有图像的元素。
2、sx：绘制裁剪的图像源的x 坐标位置；
3、sy：绘制裁剪的图像源的y坐标位置；
4、sWidth：绘制裁剪的图像源的宽度；
5、sHeight：绘制裁剪的图像源的⾼度；
6、dx：⽬标源在canvas画布上绘制的左上⾓的x坐标；
7、dy：⽬标源在canvas画布上绘制的左上⾓的y坐标；
8、dWidth：⽬标源在canvas画布上绘制的宽度，会⾃动根据图像源截取的宽度对⽐做缩放；
9、dWidth：⽬标源在canvas画布上绘制的⾼度，会⾃动根据图像源截取的⾼度对⽐做缩放；
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<img src="./timg.jpg" id="testImage">
<br>
<canvas id="mycanvas" width="350" height="200"></canvas>
<script type="text/javascript">
var cvs = ElementById("mycanvas");
var ctx = Context("2d");
var img = ElementById("testImage");
ctx.drawImage(img, 0, 0, 350, 200, 0, 0, 350, 200);
svg canvas}
</script>
</body>
</html>
效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。