1. /**
  2. * 剪切图像
  3. */
  4. function initDemo8(){
  5. var canvas = document.getElementById("demo8");
  6. if (!canvas) return;
  7. var context = canvas.getContext("2d");
  8. var img = new Image();
  9. img.src = "images/timg3.jpg";
  10. img.onload = function () {
  11. context.beginPath();
  12. context.moveTo(50, 50);
  13. context.lineTo(150, 50);
  14. context.lineTo(150, 150);
  15. context.lineTo(50, 150);
  16. context.lineTo(50, 50);
  17. context.closePath();
  18. context.clip();
  19. context.drawImage(img, 0, 0, 350, 350);
  20. };
  21. }

Canvas 剪切图片的更多相关文章

  1. canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  2. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  3. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  4. 使用canvas进行图片裁剪简单功能

    1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

  5. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  6. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  7. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  8. canvas转图片

    <script>   var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100;       window.onload ...

  9. canvas和图片之间的互相装换

    canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...

随机推荐

  1. 将TIMESTAMP类型的差值转化为秒的方法

    两个TIMESTAMP之差得到的是INTERVAL类型,而有时我们只需要得到两个时间相差的秒数,如果变成INTERVAL之后,想要获取这个值会非常麻烦. 比较常见的方法是使用EXTRACT来抽取获得的 ...

  2. C++11 新特性之 序列for循环

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/lr982330245/article/details/30971195 在C++中在C++中for循 ...

  3. 2017.11.15 JavaWeb的学生体质管理系统

    (11)案例-----学生身体体质信息管理系统的开发 11.1 功能划分: 1.添加记录模块:完成向数据库添加新纪录 2.查询记录模块:完成将数据库的记录以网页的方式显示出来,一般采用有条件的查询 3 ...

  4. Entity Framework 连接 mysql 。(code first模式)

    准备工作 1.下载vs2015 2.下载mysql2017 3.安装 1.创建类库 . 2.打开Nuget包,下载最新版的entity framewor. 3.在引用中添加 mysql.data; m ...

  5. OpenMP常用函数

    1.设置线程数目 定义如下: void omp_set_num_threads(int num_threads); 通过该函数来指定其后用于并行计算的线程数目,其中参数num_threads就是指定的 ...

  6. NodeJS中常见异步接口定义(get、post、jsonp)

    越来越多的人在使用nodeJS,作为一门服务端语言,我们不可避免的要写异步接口(ajax和jsonp).再次强调ajax和jsonp是两个概念,但是由于jquery的封装,使这两种异步接口的调用方式, ...

  7. java基础 数组 Set Map 集合综合应用 生成带0的随机字符串 "00000001" 水果商品号问题

    package com.swift.test01; /*有四种水果(苹果,香蕉,西瓜,橘子) 1.给每种水果设定一个商品号,商品号是8个0-9的随机数,商品号码不能重复, 最小值 "0000 ...

  8. Struts2基础入门

    Struts2基础入门 创建一个web工程 0)导包并且创建一个核心配置文件 <?xml version="1.0" encoding="UTF-8"?& ...

  9. 转 MYSQL 命令行大全 (简洁、明了、全面)

    MYSQL常用命令 .导出整个数据库 mysqldump -u 用户名 -p –default-character-set=latin1 数据库名 > 导出的文件名(数据库默认编码是latin1 ...

  10. 详解MessageBox(),MsgBox函数的正确使用

    //或者使用chr(13),chr(10)效果一样 MsgBox "a"&chr(13)&"b"&chr(10)&"c ...