canvas_6_绘制图片

最新推荐文章于 2024-07-25 09:24:40 发布

熙哥_tito

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量30

点赞数

分类专栏： canvas 文章标签：数学建模 javascript 开发语言

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131004775

版权

canvas 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

drawImage(imageResource, dx, dy, dWidth, dHeight)

// 参数 1：要绘制的 img

// 参数 2、3：绘制的 img 在 canvas 中的坐标

// dWidth, dHeight，这两个参数用来控制当像 canvas 画入时应该缩放的大

<style>
   canvas {
      border: 1px solid #000; 
   }
</style>
<body>
  <image  src="./pic/41651.png" ></image>
  <canvas id="can1" width="300" height="300"></canvas>
  <canvas id="can2" width="300" height="300"></canvas>
  <script>
    function draw() {
      let canvas1 = document.getElementById("can1")
      let canvas2 = document.getElementById("can2")
      let ctx1 = canvas1.getContext("2d") 
      let ctx2 = canvas2.getContext("2d") 
      let img = document.querySelector("img");
      ctx1.drawImage(img,0,0, 300,300)
      ctx2.drawImage(img,0,0, 300,300,50,50,50,100)
    }
    document.querySelector("img").onclick = function (){
    draw();
}
  </script>
  <!-- <canvas id="canvas" height="600" width="700"></canvas>
  <img id="img" src="http://panpan.dapanna.cn//image-20221008162339344.png" alt="" style="display:none;">
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    const img = document.getElementById('img')
    // 当图片加载完之后运行：
    img.onload = function () {
      // 图片加载完以后
      // 创建图案
      var ptrn = ctx.createPattern(img, 'repeat');
      ctx.fillStyle = ptrn;
      ctx.fillRect(0, 0, 700, 600);
    }
  </script> -->

</body>