(function () {

     var img;

     var canvas = document.getElementById("canvas");

     var con = canvas.getContext("2d");

     var circleX = 0, circleY = 100, speed = 1;

     function loadImage() {

         img = new Image();

         img.src = "11.jpg";

     }

     function render() {

         circleX += speed;

         if (circleX > 300) {

             speed = -1;

         }

         if (circleX < 100) {

             speed = 1;

         }

         con.clearRect(0,0,400,300);

         con.save();

         con.beginPath();

         con.arc(circleX,circleY,100,0,2*Math.PI);

         con.closePath();

         con.clip();

         con.drawImage(img,0,0);

         con.restore();

         requestAnimationFrame(render);

     }

     function init() {

         loadImage();

         render();

     }

     init();

 })();
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <canvas id="canvas" width="400" height="300"></canvas>

 <script src="main.js"></script>

 </body>

 </html>

clip API实现遮罩的更多相关文章

  1. Silverlight形状、画笔、变换、图像处理、几何图形

    1.形状(Ellipse.Line.Path.Polygon.Polyline 和 Rectangle) <UserControl x:Class="SharpStudy.MainPa ...

  2. canvas实现圆框图片

    作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...

  3. C#使用Windows API实现桌面上的遮罩层(鼠标穿透)

    C#使用Windows API实现桌面上的遮罩层(鼠标穿透) C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLa ...

  4. Uni2D 入门 -- Animation Clip 和 Animation API

    转载 csdn kakashi8841 http://blog.csdn.net/kakashi8841/article/details/17599505 Animation Clip 一个anima ...

  5. moviepy音视频剪辑：mask clip遮罩剪辑、遮片、蒙版的作用以及其包含的构成内容

    ☞ ░ 前往老猿Python博文目录 ░ 在阅读moviepy的类ImageClip的构造方法代码时,对于其中涉及遮罩的处理没有理解,到处查找遮罩的资料没有查到,最后到moviepy的官网上尝试了一下 ...

  6. api日常总结：前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

  7. JavaScript图形实例：Canvas API

    1．Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制 ...

  8. 【UGUI源码分析】Unity遮罩之RectMask2D详细解读

    遮罩,顾名思义是一种可以掩盖其它元素的控件.常用于修改其它元素的外观,或限制元素的形状.比如ScrollView或者圆头像效果都有用到遮罩功能.本系列文章希望通过阅读UGUI源码的方式,来探究遮罩的实 ...

  9. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

随机推荐

  1. C语言培训第一天

    下面是一些命令,先来谈谈今天的若干收获吧! 计算机中的一切文件都是以二进制补码的形式存在,问题也就来了. 第一个问题 如果我们给一个无符号的数赋值一个负数,他会读取到什么,又会输出什么?(似乎问题和上 ...

  2. Python3基础 assert关键字 成功啥事没有，失败了就报错

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. <转>32位移植到64位 注意事项

    32bit-64bit porting work注意事项 64位服务器逐步普及,各条产品线对64位升级的需求也不断加大.在本文中,主要讨论向64位平台移植现有32位代码时,应注意的一些细小问题. 什么 ...

  4. 移除virbr0

    在我们使用虚拟机管理器的图形界面来安装虚拟机的时候,自动创建虚拟网桥和虚拟网卡.另外,我们很少会在一个虚拟机中再安装一个虚拟机,所以,我们可以将宿主机上的网桥删除.方法如下: # virsh net- ...

  5. [HDOJ5289]Assignment（RMQ，二分）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5289 题意:求满足区间内最大值和最小值差为k的区间个数. 预处理出区间的最值,枚举左端点,根据最值的单 ...

  6. [SAP ABAP开发技术总结]日期函数

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. Python基础学习笔记（一）入门

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-chinese-encoding.html 3. http://w ...

  8. 是时候改变你的开发方式了-XAF信息系统快速框架介绍

    我是一名.Net开发者,从DOS时代Turbo c 算起(1996年),马上满20年了.想想写过的代码真是不少,却做了很多重复反复的编码工作.当然中间也带过团队做过几个大项目,但是代码仍没写够,还是每 ...

  9. nodePPT 这可能是迄今为止最好的网页版PPT

    demo例子为:http://qdemo.sinaapp.com/#0 下载地址为:https://github.com/ksky521/nodeppt/

  10. HttpServletRequest学习

    package cn.request; import java.io.IOException; import java.io.PrintWriter; import java.io.Unsupport ...