Canvas 剪切图片

/**
 * 剪切图像
 */
function initDemo8(){
    var canvas = document.getElementById("demo8");
    if (!canvas) return;
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = "images/timg3.jpg";
    img.onload = function () {
        context.beginPath();
        context.moveTo(50, 50);
        context.lineTo(150, 50);
        context.lineTo(150, 150);
        context.lineTo(50, 150);
        context.lineTo(50, 50);
        context.closePath();
        context.clip();
        context.drawImage(img, 0, 0, 350, 350);
    };
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 私有变量

    就只是小茗
  • <script>元素在XHTML中的用法

      编写XHTML代码的规则要比编写HTML严格得多,例如如下代码: 1 <script type="text/javascript"> 2 fun...

    就只是小茗
  • CSS深入理解学习笔记之float

    1、float的历史   float设计的初衷仅仅是为了文字环绕效果。   示例代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DT...

    就只是小茗
  • 人脸识别系列一 | 特征脸法

    从这里开始,我会不定期的更新一些人脸识别的有趣算法和小demo算法,源码也会开放出来,自己在学习的过程中希望也能帮助到公众号中对这方面感兴趣的小伙伴,无论是从源...

    BBuf
  • 消息中间件之RcoketMQ单机版安装

    一、RocketMQ安装环境 64bit linux 64bit jdk1.8+ maven 3.2.x git(不一定需要) 本文安装环境为centos7....

    lyb-geek
  • Java 端口扫描器 TCP的实现方法

    想必很多朋友都实现过一个简易的聊天室这个功能,其中涉及到Socket套接字这个类,我们通过一个特定的IP以及特定的端口创建一个服务端的套接字(ServerSoc...

    Rekent
  • RocketMQ 环境搭建

    张申傲
  • JavaScript ES6对Proxy的原生支持的一个例子:开发人员学习额外的编程语言

    使用代理模式,使得Jerry作为一个ABAP开发人员被雇佣的时候,在业余时间里,也能自学其他的编程语言:

    Jerry Wang
  • 自动驾驶五问

    2017年9月,美国众议院通过了美国首部自动驾驶汽车法案(H.R.3388),该法案的通过标志着自动驾驶进入了一个新的历史时期。 在新的历史时期之下,我想问自动...

    企鹅号小编
  • 谷歌发布Edge TPU芯片和Cloud IoT Edge,将机器学习带到边缘设备

    谷歌为其机器学习框架TensorFlow定制的芯片——TPU正在向边缘设备发展。在旧金山举行的Cloud Next会议上,谷歌宣布推出Edge TPU和Clou...

    AiTechYun

扫码关注云+社区

领取腾讯云代金券