在画布上插入图片——要求大小、位置

最新推荐文章于 2021-06-17 14:42:09 发布

礼礼。

最新推荐文章于 2021-06-17 14:42:09 发布

阅读量1.7k

点赞数

分类专栏：图像选取文章标签： html5 javascript

原文链接：https://www.w3school.com.cn/tags/canvas_drawimage.asp

版权

图像选取专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在画布上绘制图片
在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<p>要使用的图片：</p>

<img src="/i/eg_tulip.jpg" alt="tulip" id="tulip" style="margin-left:0px;" />

<p>Canvas:</p>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
document.getElementById("tulip").onload=function(){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  
  var img=document.getElementById("tulip");
  ctx.drawImage(img,0,0,200,100,20,20,200,100);
  //（0，0）开始剪辑图像的xy坐标
  //(200,100)剪辑图像的宽，高
  //(20,20)画布上图像开始的起始坐标
  //(200,100)所要选取图像的宽度和高度，会自动对图像进行缩小扩大
};
</script>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

礼礼。

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在画布上插入图片——要求大小、位置

在画布上绘制图片<!DOCTYPE html><html><body><p>要使用的图片：</p><img src="/i/eg_tulip.jpg" alt="tulip" id="tulip" style="margin-left:0px;" /><p>Canvas:</p><canvas id="myCanvas" width="300" height="150" style=
复制链接

扫一扫