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相当于画布,而 ...
随机推荐
- ubuntu16.04 搭建 Mysql服务器
ubuntu16.04 安装 mysql5.7 ,并配置远程访问 安装mysql及其可选组件 apt-get install mysql-serverapt-get install mysql-cli ...
- 调用REST接口获取数据
/// <summary> /// 根据机构代码本机构下报警用户列表: /// </summary> /// <param name="org_code&quo ...
- 中国特色社会主义的体制中有这样的现象：地方省政府要坚持党的领导和按 照国务院的指示进行安全生产。请编写一个java应用程序描述上述的体制现象。
package a; public interface CentralPartyCommittee { void partyLeader(); } package a; public abstract ...
- 【leetcode❤python】 36. Valid Sudoku
#-*- coding: UTF-8 -*-#特定的九个格内1-9的个数至多为1#依次检查每行,每列,每个子九宫格是否出现重复元素,如果出现返回false,否则返回true.class Solutio ...
- JAVA语言基础——类型转换
1.自动类型转换 自动类型转换又称作隐式转换,可以将一个int变量转换为float类型. public class Conver { public static void main(String[] ...
- Virtualenv: 一个Python环境管理工具（windown版本）
1.安装virtualenv 在安装virtualenv之前,我们需要安装至少有一个版本的python:因为virtualenv是python的一个第三方模块,必须基于python环境才能安装: 如果 ...
- c语言中的位移位操作
先要了解一下C语言里所有的位运算都是指二进制数的位运算.即使输入的是十进制的数,在内存中也是存储为二进制形式. “<<”用法: 格式是:a<<m,a和m必须是整型表达式,要求m ...
- C# 创建一个日志文件
private static string m_fileName = "C:\\ErrorMsg.txt"; public static void CreateErrorLog(s ...
- python中的is、==和cmp()比较字符串
python 中的is.==和cmp(),比较字符串 经常写 shell 脚本知道,字符串判断可以用 =,!= 数字的判断是 -eq,-ne 等,但是 Python 确不是这样子地.所以作为慢慢要转换 ...
- Android中序列化对象到XMl 和 XML反序列化为对象
package com.example.xmloperation; import java.io.File; import java.io.FileOutputStream; import java. ...