文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

学习 canvas 的 globalCompositeOperation 做出的神奇效果

定义 globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。 源图像 = 您打算放置到画布上的绘图。...在目标图像上显示源图像。 source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 source-in 在目标图像中显示源图像。...只有目标图像内的源图像部分会显示，目标图像是透明的。 source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。...只有源图像外的目标图像部分会被显示，源图像是透明的。 lighter 显示源图像 + 目标图像。 copy 显示源图像。忽略目标图像。 xor 使用异或操作对源图像与目标图像进行组合。...第一种 使用 canvas 的 getImageData 方法，来获取 canvas 上的像素信息，这个方法返回的对象的 data 属性是一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至

1.4K20

​canvas 高级功能（中）

简而言之，组合就是将多个可视化元素组合成为一个可视化元素。在画布中绘制的所有东西都是已经合成的，这意味着绘制的所有内容都会与已经绘制的现有元素合并在一起。...必须指出的是，根据赋值顺序的不同globalCompositeOperation的所有值可能会涉及源或目标的其中一个（取决于顺序），而不会同时涉及两者。...让我们先了解一下globalCompositeOperation支持的11种选择。使用下面的代码作为模板，你可以学习每一种合成操作。其中蓝色正方形是目标，而粉红色正方形是源。...阴影 所有人都喜欢好看的阴影效果，它们可能是Adobe Photoshop中使用最广泛的效果了，并且也经常在Web和图形设计中使用。如果操作正确，它们实际上确实能够增加图像真实感。...通过组合使用各种模糊和颜色值，我们就能够实现一些与阴影完全无关的效果。例如，使用模糊黄色阴影在一个对象周围创建出光照效果，如太阳或发光体。

80020
您找到你想要的搜索结果了吗？
是的
没有找到

一张刮刮卡竟包含这么多前端知识点

知识点3：canvas的globalCompositeOperation 在w3school上可以查阅到该属性的详细说明： 值 描述 source-over 默认。在目标图像上显示源图像。...source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。...lighter 显示源图像 + 目标图像。 copy 显示源图像。忽略目标图像。 xor 使用异或操作对源图像与目标图像进行组合。...如果存在多个触点，则使用最后一个触点。通过e.changedTouches获取最后一个触点。 计算触点在canvas里的相对坐标。 在canvas中的触点位置绘制圆形。...还记得4.2小节讲的globalCompositeOperation么？当设置为 destination-out的时候，源图像的非透明部分会抠去目标图像，因此实现了刮刮卡的刮涂层效果。

1.3K20

canvas 绘制双线技巧

/ta... globalCompositeOperation的定义和用法 globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。...要实现双线的绘制，就要求用同样的路径，不同的线宽绘制两条线路 （我们称之为目标线路和源线路）。并要达到一条线路抠出另外一条线路的效果。...看下destination-out的解释： 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。 绘制了线路A的canvas图像是目标图像，线路B是源图像。...xor 和 source-out 把上面的代码的globalCompositeOperation修改成xor，发现效果也是可以的，xor的解释如下： 使用异或操作对源图像与目标图像进行组合。...对于source-out，其效果正好和destination-out的效果相反： 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

2.3K50

撩妹技能 get，教你用 canvas 画一场流星雨

现在就一起来做一场流星雨，用程序员的野路子浪漫一下。 要画一场流星雨，首先，自然我们要会画一颗流星。...画一颗流星 是的，的却是没这个 api，但是不代表我们画不出来。...注意这里的 destination-out 和 destination-in，示例中这两个属性最终都只有部分源图像保留了下来，符合我们只要保留流星的需求。...destination-in ：只保留了源图像（矩形）和目标图像（圆）交集区域的源图像 destination-out：只保留了源图像（矩形）减去目标图像（圆）之后区域的源图像 上述示例目标图像的透明度是...而我们想要的是他可以按照目标透明度进行部分擦除。改一下示例里的代码看看是否支持半透明的计算。 看来这个属性支持半透明的计算。源图像和目标图像交叠的部分以半透明的形式保留了下来。

90121

canvas学习笔记（八）—- 基本动画

、画布或视频 sx：开始剪切的x坐标，可选 sy：开始剪切的y坐标，可选 swidth、sheight ：被剪切的高度和宽度 x：在画布上放置图像的x坐标 y：在画布上放置图像的y坐标 width：要使用的图像的宽度...，可选（伸展或缩小图像） height：要使用的图像的高度，可选（伸展或缩小图像） 3.globalCompositeOperation属性设置或返回如何将一个源图像绘制到目标图像上 源图像 = 打算放到画布上的绘图...源图像位于目标图像之外的部分是不可见的。 source-in：在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像时透明的。 source-out：在目标图像之外显示源图像。...忽略目标图像 xor：使用抑或操作对源图像与目标图像进行组合。 <!...'2d'); ctx.globalCompositeOperation = 'destination-over';//在源图像上方显示目标图像。

59930

FireFox下Canvas使用图像合成绘制SVG的Bug

于是我把之前写好的两种算法发给了小伙伴，让他参照实现，第一种算法是操纵像素、第二种使用了图像合成：globalCompositeOperation。 所有的事情都可能会有意外，写程序更是如此了。...通过一起排查，最终发现我的示例代码和产品中代码的一个区别是：示例代码用的是png图片，而产品中用的是svg图片。 难道是svg图片的问题，拿一个svg图片放到示例代码中，果然不对。...结论已经明显： FireFox浏览器下，用Canvas下绘制绘制SVG图的时候，globalCompositeOperation的设置将不生效。...下面是一段用于测试的代码，ctx.globalCompositeOperation = 'destination-out' 表示用源图像的形状去挖空目标图像。...对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

1.1K00

FireFox下Canvas使用图像合成绘制SVG的Bug

于是我把之前写好的两种算法发给了小伙伴，让他参照实现，第一种算法是操纵像素、第二种使用了图像合成：globalCompositeOperation。 所有的事情都可能会有意外，写程序更是如此了。...通过一起排查，最终发现我的示例代码和产品中代码的一个区别是：示例代码用的是png图片，而产品中用的是svg图片。 难道是svg图片的问题，拿一个svg图片放到示例代码中，果然不对。...结论已经明显： FireFox浏览器下，用Canvas下绘制绘制SVG图的时候，globalCompositeOperation的设置将不生效。...下面是一段用于测试的代码，ctx.globalCompositeOperation = 'destination-out' 表示用源图像的形状去挖空目标图像。...对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

89910

简单的canvas绘图

anvas 本身并没有绘制能力（它仅仅是图形的容器），是一块无色透明的区域，就像一个可以设置宽度高度没有背景的DIV一样，你必须使用JavaScript脚本来完成在其中的绘图任务。...设置z-index做蒙版在上层，然后实现刮的效果（： globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。...目标图像 = 你已经放置在画布上的绘图 #### 下图是globalCompositeOperation 属性值的实例 蓝色为目标（已有到）图像 ， 红色为源（新到）图像 ?...); pen.globalCompositeOperation = "destination-out"; //要禁用页面的鼠标选中拖动的事件，就是不运行执行选中操作。...总结：好啦，canvas的简单属性和案例介绍完了，效果系不系很炫啊？以上是我学习的内容分享给大家的。

2.3K20

H5和微信小游戏 Canvas API 整理前言

（1）获取canvas 要使用canvas绘制，首先得获取到canvas实例，在H5中获取canvas和获取其它标签一样，通过document获取。...（6）放射渐变 没有和渐变放在一起，主要是函数不一样 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext...在目标图像上显示源图像。 source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 source-in 在目标图像中显示源图像。...只有目标图像内的源图像部分会显示，目标图像是透明的。 source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。...只有源图像外的目标图像部分会被显示，源图像是透明的。 lighter 显示源图像 + 目标图像。 copy 显示源图像。忽略目标图像。 xor 使用异或操作对源图像与目标图像进行组合。

2.7K40

canvas绘图基本使用方法(三)

canvas绘图基本使用方法(三) ?...globalCompositeOperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值： 值 描述 source-over 在目标图像上显示源图像（默认） source-atop...源图像位于目标图像之外的部分是不可见的 source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的 source-out 在目标图像之外显示源图像。...只有目标图像之外的源图像部分会显示，目标图像是透明的 destination-over 在源图像上显示目标图像 destination-atop 在源图像顶部显示目标图像。...忽略目标图像 xor 使用异或操作对源图像与目标图像进行组合 下面是一个小示例，可以通过点击改变组合效果： ? ? ? 读者可以点击标签来观察不同的组合效果，效果如下： ?

97330

【Web技术】774- 基于canvas完成图片裁剪工具

因为canvas不是矢量图，在Retina屏下，浏览器用多个像素点去渲染一个像素，导致canvas最后呈现出模糊问题。...不过这个只在某些浏览器上有，例如safari 通过设置canvas.width/height和canvas.style.width/height对canvas进行缩放处理，比例为devicePixelRatio...通过ctx.drawImage将图片绘画到canvas上。 因为对于图片裁剪工具而言，img是应该绘画在最底层，所以需要通过globalCompositeOperation，将其绘画在底层。...(globalCompositeOperation表示如何将一个源（新的）图像绘制到目标（已有）的图像上。)...处理思路： 新创建一个canvas，将img完整绘画在上面，并且完成旋转问题 通过选中框的x y w h的值，还有img width/height和canvas width/height的值，得到对应原始图片的截选部分的

1.2K20

从零开发一款轻量级滑动验证码插件(深度复盘)

，今天继续和大家分享一款非常有趣且实用的前端实战项目——从零基于 react + canvas 实现一个滑动验证码，并将其发布到 npm 上供他人使用。...从这个实战项目中我们可以学到如下知识点: 前端组件设计的基本思路和技巧 canvas 基本知识和使用 react hooks 基本知识和使用 滑动验证码基本设计原理 如何封装一款可扩展的滑动验证码组件...属性，它的主要目的是设置如何将一个源（新的）图像绘制到目标（已有）的图像上。...源图像 = 我们打算放置到画布上的绘图 目标图像 = 我们已经放置在画布上的绘图 w3c上有个形象的例子: 这里之所以设置该属性是为了让镂空的形状不受背景底图的影响并覆盖在背景底图的上方。...发布到 npm 后的效果: 最后 如果大家对可视化搭建或者低代码/零代码感兴趣，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端真正的技术。

1.8K20

web前端学习：HTML5十个新特性

通用属性：                             placeholder：占位提示文字                             mutiple：是否允许多个输入...使用Canvas的步骤： ?                  ...松手释放                     dragleave：拖动离开            注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据...源对象：event.dataTransfer.setData(key, value)            目标对象：var value = event.dataTransfer.getData(key...3)Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制                     4)H5 WebStorage存储，如用户偏好、访问历史等安全要求的数据，老IE不兼容但易使用且容量大

2.8K10

探究 canvas 绘图中撤销（undo）功能的实现方式

我们知道，在浏览器端实现图片添加水印功能，通常的做法就是使用 canvas 的 drawImage 方法。...对于普通的合成（比如一张底图和一张 PNG 水印图片合成）来说，其大致实现原理如下： var canvas = document.getElementById("canvas"); var ctx =...幸运的是 canvas 2D 原生提供了获取快照和通过快照恢复画布的 API ——getImageData/putImageData。...ctx.getImageData(sx, sy, sw, sh); /* * @param { Object } imagedata 包含像素值的对象 * @param { Number } dx 源图像数据在目标画布中的位置偏移量...（x 轴方向的偏移量） * @param { Number } dy 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量） */ void ctx.putImageData(imagedata

2K50

htm5新特性

· 位置信息从何而来 Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户。...设备可以使用下列数据源：· IP地址 三维坐标 GPS 从RFID、WiFi和蓝牙到WiFi的MAC地址 GSM或CDMA手机的ID 用户自定义数据 使用方法 // 一次更新navigator.geolocation.getCurrentPosition...· autofocus 通过autofocus特性可以指定某个表单元素获得输入焦点，每个页面上只允许出现一个autofocus特性，如果设置了多个，则相当于未指定此行为。...list特性和datalist元素 通过组合使用list特性和datalist元素，开发人员能够为某个输入型控件构造一张选值列表。...通过设置min和max特性，可以将range输入框的数值输入范围限定在最低值和最高值之间。

1.8K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券