clip API实现遮罩
(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实现遮罩的更多相关文章
- Silverlight形状、画笔、变换、图像处理、几何图形
1.形状(Ellipse.Line.Path.Polygon.Polyline 和 Rectangle) <UserControl x:Class="SharpStudy.MainPa ...
- canvas实现圆框图片
作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...
- C#使用Windows API实现桌面上的遮罩层(鼠标穿透)
C#使用Windows API实现桌面上的遮罩层(鼠标穿透) C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLa ...
- Uni2D 入门 -- Animation Clip 和 Animation API
转载 csdn kakashi8841 http://blog.csdn.net/kakashi8841/article/details/17599505 Animation Clip 一个anima ...
- moviepy音视频剪辑：mask clip遮罩剪辑、遮片、蒙版的作用以及其包含的构成内容
☞ ░ 前往老猿Python博文目录 ░ 在阅读moviepy的类ImageClip的构造方法代码时,对于其中涉及遮罩的处理没有理解,到处查找遮罩的资料没有查到,最后到moviepy的官网上尝试了一下 ...
- api日常总结：前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
- JavaScript图形实例：Canvas API
1．Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制 ...
- 【UGUI源码分析】Unity遮罩之RectMask2D详细解读
遮罩,顾名思义是一种可以掩盖其它元素的控件.常用于修改其它元素的外观,或限制元素的形状.比如ScrollView或者圆头像效果都有用到遮罩功能.本系列文章希望通过阅读UGUI源码的方式,来探究遮罩的实 ...
- html5 canvas常用api总结(二)--绘图API
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...
随机推荐
- sysbench 0.5 oltp测试笔记
sysbench 0.5相比0.4版本的主要变化是,oltp测试结合了lua脚本,不需要修改源码,通过自定义lua脚本就可以实现不同业务类型的测试.同时0.5相比0.4需要消耗更多的cpu资源. 1. ...
- VPython—旋转坐标系
使用arrow( )创建三个坐标轴代表一个坐标系,其中X0-Y0-Z0为参考坐标系(固定不动),X-Y-Z为运动坐标系,这两个坐标系原点重合,运动坐标系可以绕参考坐标系或其自身旋转.在屏幕上输出一个转 ...
- Reading Csv Files with Text_io in Oracle D2k Forms
Below is the example to read and import comma delimited csv file in oracle forms with D2k_Delimited_ ...
- Nmap使用指南(1)
Nmap是一款开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字Nmap是Network Mapper的简称.Nmap最初是由Fyo ...
- [Effective Java]第七章 方法
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- NPOI利用多任务模式分批写入多个Excel
接上文NPOI大数据分批写入同个Excel,这次是利用task多任务同时写入到多个Excel. Form2.cs private void btnExport_Click(object sender, ...
- POJ 2376 Cleaning Shifts（轮班打扫）
POJ 2376 Cleaning Shifts(轮班打扫) Time Limit: 1000MS Memory Limit: 65536K [Description] [题目描述] Farmer ...
- git bash下的选择、复制、粘贴
1. 打开git bash 2.点击左上角,选择属性,打钩 3.回到界面,选择一行文字,然后点击 “右键”,这样就复制到剪切板了.再点 “右键”,可以粘贴到命令窗口中了.
- yii2-datepicker/datetimepicker插件使用
datepicker: https://github.com/2amigos/yii2-date-picker-widget 通过composer安装: composer require 2amigo ...
- RelativeLayout用到的一些重要的属性：
下面是常用的一些属性 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中android:la ...