HTML5之drawImage函数

参数说明：
drawImage(image, x, y) //按原图片大小绘制。
drawImage(image, x, y, width, height) //按指定大小绘制。
drawImage(image, sourceX服务器托管网, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) //常用于图片裁剪。

其中：
image:所要绘制的图像。这必须是表示 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。
x和y：图片在文档中的坐标位置。
width和height：图片的宽高。
对于drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) 常用有图片的裁剪。其参数含义如下：
在原来image上从某一个位置开始(sourceX,sourceY)，指定长宽进行剪切(sourceX,sourceY),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上，当然裁剪后的会覆盖原来的图片。

!DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>drawImage/title>
/head>
body>
 canvas id="myCanvas" width="1800" height="1000">/canvas>
    script type="text/javascript">
      
        var canv=document.getElem服务器托管网entById("myCanvas");
        var ctx = canv.getContext("2d");
            img = new Image();
            img.src = "./dy.jpg";
        //当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕
        //当然画不上去喽，这就和浏览器的性能有关了。
            img.onload=function(){
            ctx.drawImage(img,0,0,1800,1000,0,0,500,400);
            }
    /script>
/body>
/html>

相当于缩小了，原图像素实际上是1920*1080

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: GreptimeDB v0.4 重大更新 — 新版引擎 Mito2 专为时序数据而生

引言 从去年 11 月 GreptimeDB 首次上线开源以来，Greptime 团队经过一轮又一轮的持续迭代，从 v0.1 的初步架构完成，到 v0.2 兼容了 PromQL 的单机版本，再到 v0.3 增加了分布式的能力。 v0.3 功能层面已经相对稳定，…