canvas 遮罩
上一篇介绍了CSS3可以实现mask的方式,本篇介绍canvas同样也可以实现遮罩的方法:
原理:
canvas是在画布上绘图,可以绘制各种形状,同时可以在一个层上重复画图,默认情况下后面的会覆盖前面的图,但是有一个属性可以设置多个图重复时的显示规则,就如同css3中的-webkit-mask-composite一样,canvas有一个属性叫globalCompositeOperation,他可以有以下取值:
source-over(默认值):在原有图形上绘制新图形
destination-over:在原有图形下绘制新图形
source-in:显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色
destination-in:显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色
source-out:只显示新图形非交集部分
destination-out:只显示原有图形非交集部分
source-atop:显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色
destination-atop:显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色
lighter:原有图形和新图形都显示,交集部分做颜色叠加
xor:重叠飞部分不现实
copy:只显示新图形
此前有张图可以看出区别:
为了实现遮罩,我们使用的值是 destination-out:只显示原有图形非交集部分,这样两层图形非交集部分的源图形将会显示,也就是第一层图形(源图形),而两者交集部分将不显示,也就是变成透明,这样背景图就会显示出来。
具体的区别可以通过以下的例子查看:
<!DOCTYPE html>
<html>
<head>
<title>简单的mask</title>
<style type='text/css'>
#main_div{
width:300px;
height:300px;
background-color:silver;
}
#tips{
margin-top:10px;
font-size:13px;
}
#tenpay_txt{
width:879px;
height:234px;
margin-top:50px;
border:solid 1px silver;
background:url('back.jpg') no-repeat;
}
</style>
</head>
<body>
<div id="main_div"></div>
<div id="buttons">
<input type='button' id="showCanvas1" value="绘制目标层" onclick="showCanvas1()"></input>
<select id="select_type">
<option value="source-over">source-over</option>
<option value="destination-over">destination-over</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="destination-out">destination-out</option>
<option value="source-atop">source-atop</option>
<option value="destination-atop">destination-atop</option>
<option value="lighter">lighter</option>
<option value="xor">xor</option>
<option value="copy">copy</option>
</select>
<input type='button' id="showCanvas2" value="绘制源层" onclick="showCanvas2()"></input>
<input type='button' id="showCanvas2" value="清空区域" onclick="clearCanvas()"></input>
</div>
<div id="tips">
红色为源图形,白色为目标图形
</div> <script type="text/javascript">
var main_div = document.getElementById("main_div");
var canvas_s=document.createElement("canvas");
canvas_s.width=300;
canvas_s.height=300;
main_div.appendChild(canvas_s);
canvas_s.style.position="absolute";
var c_context = canvas_s.getContext("2d"); function showCanvas1(){
c_context.fillStyle = "white";
c_context.fillRect(50,50,200,200);
}
function showCanvas2(){
var type = document.getElementById("select_type").value;
c_context.globalCompositeOperation=type;
c_context.fillStyle = "red";
c_context.fillRect(75,75,150,150);
}
function clearCanvas(){
c_context.clearRect(0,0,300,300);
}
</script> <div id="tenpay_txt">
</div> <script type="text/javascript">
var tenpay_txt = document.getElementById("tenpay_txt");
var canvas = document.createElement("canvas");
canvas.width=879;
canvas.height=234;
tenpay_txt.appendChild(canvas);
canvas.style.position="absolute";
var context = canvas.getContext("2d");
var left_start = 100;
var left_right = 780;
var left_now = left_start;
var left_step = 5;
var direction = 1;
setInterval(drawMask,30); function drawMask()
{
if(direction == -1 && left_now == left_start){
direction = 1;
}
if(direction ==1 && left_now > left_right){
direction = -1;
}
left_now += left_step*direction; context.clearRect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation="source-over";
context.fillRect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation="destination-out";
context.beginPath();
context.arc(left_now,130,100,0,Math.PI*2,true);
context.fill();
} </script>
</body>
</html>
通过这种方法可以实现各种遮罩,包括刮刮卡等效果,具体可以自己动手试验下,不算复杂。
/// use save when using clip Path
ctx2.save();
ctx2.beginPath();
ctx2.moveTo(0, 20);
ctx2.lineTo(50,0);
/// ... more here - see demo
ctx2.lineTo(400, 20);
ctx2.lineTo(400, 100);
ctx2.lineTo(0, 100);
ctx2.closePath();
/// define this Path as clipping mask
ctx2.clip();
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
// Save the state, so we can undo the clipping
ctx.save();
// Create a shape, of some sort
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 30);
ctx.lineTo(180, 10);
ctx.lineTo(200, 60);
ctx.arcTo(180, 70, 120, 0, 10);
ctx.lineTo(200, 180);
ctx.lineTo(100, 150);
ctx.lineTo(70, 180);
ctx.lineTo(20, 130);
ctx.lineTo(50, 70);
ctx.closePath();
// Clip to the current path
ctx.clip();
ctx.drawImage(img, 0, 0);
// Undo the clipping
ctx.restore();
}
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
/// draw the image ctx2.drawImage(img, 0, 0); /// reset clip to default ctx2.restore();
http://jsfiddle.net/jimrhoskins/dDUC3/1/
canvas 遮罩的更多相关文章
- 2015.4.25-2015.5.1 字符串去重,比例圆设计,中奖机和canvas橡皮擦效果等
1.字符串去重,html模板取值 2.javascript正则表达式之$1...$9 3.jquery插件 4.返回上一页并刷新 解决方法: <a href ="javas ...
- 视差滚动(Parallax Scrolling)插件补充
13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...
- canvas生成遮罩图片
首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 【原】使用Xfermode正确的绘制出遮罩效果
以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...
- Loading加载小插件,用户可以选择html格式或canvas格式,自定义loading图片,canvas色彩搭配可根据个人喜好
;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出 ...
- Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
随机推荐
- TOSCA自动化测试工具--How to modify windows
1.页面窗口(高亮的部分是我们需要的所有窗口) 2.窗口可以任意拖拽到任何地方 3.窗口可以并列显示 任务栏点击按钮可以继续拖动 放到自己想放的地方 4.收起preview,调整宽窄 5.保存当前wi ...
- 对Java CAS的一些了解(正在整理学习中)
①引言 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题 ...
- redis 简单命令操作
一.概述: 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与K ...
- ERROR 1093 (HY000): You can't specify target table 'test' for update in FROM clause
MySQL执行更新语句报错: 更新语句:UPDATE test SET state=50 WHERE num IN(SELECT num FROM test WHERE state=60): 报错:E ...
- 20145302张薇 《Java程序设计》第二周学习总结
20145302张薇 <Java程序设计>第一周学习总结 教材学习内容总结 第三章 第三章讲的是基本类型,变量,运算符和基本条件语句. 基本类型分为: 整数:short(2 byte),i ...
- Python学习笔记(十二)—Python3中pip包管理工具的安装【转】
本文转载自:https://blog.csdn.net/sinat_14849739/article/details/79101529 版权声明:本文为博主原创文章,未经博主允许不得转载. https ...
- 【jdk源码分析】java多线程开启的三种方式
1.继承Thread类,新建一个当前类对象,并且运行其start()方法 package com.xiaostudy.thread; /** * @desc 第一种开启线程的方式 * @author ...
- 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛-A banana·
2017-09-09 16:41:28 writer:pprp 题意很好理解就不说了,实现比较清晰,选择邻接表来做 但是我用的是链表来实现的,所以导致出现了很多问题,最后卡的最长时间的一个问题是 应该 ...
- asp.net core + log4net+exceptionles+DI
参考了ABP的代码,我也用依赖注入的原则,设计了日志模块. 与abp不同之处在于:1)DI容器使用的是.net core自带的注入容器,2)集成了excetpionless日志模块,3)不依赖于abp ...
- python+opencv+pyqt5控制摄像头在Qlabel上显示
import cv2 import numpy as numpy from PIL import * import sys from PyQt5.QtWidgets import * from PyQ ...