javascript - Canvas :在绘制的图像和剪辑之间插入渐变矩形-6ren

javascript - Canvas :在绘制的图像和剪辑之间插入渐变矩形

转载作者：行者123 更新时间：2023-11-28 08:32:37

24

4

我正在尝试创建一个矩形，它将在动态剪切的图像顶部淡出。

但是，创建矩形的任何实例都位于绘制的图像后面，我似乎无法弄清楚如何将其放置在顶部，以便形状和图像都被剪切。

这是我目前所在位置的 fiddle :JSFiddle

这是我的 html:

 <div id='demo'>
    <canvas  id="canvas" width="200px" height="200px"></canvas>
    <img id="img" src="http://www.filterforge.com/more/help/images/size200.jpg" />   
 </div>

这是我的 JavaScript:

function init(){
            var canvas = document.getElementById('canvas');
            var c = canvas.getContext('2d');

            var r = 1;

            function draw(){
                c.beginPath();
                c.arc(100,100,r,0,2*Math.PI,false);
                r = r + 1;

                // Start Image
                c.save();
                c.clip();
                var img = document.getElementById('img');
                c.drawImage(img,0,0);
                c.restore();

                // The Rectangle I am also trying to mask
                c.fillStyle = "rgba(0,0,0,0.025)"
                c.fillRect(0, 0, 200, 200);
                c.save();
                c.clip();
                c.restore();

                if(r < 100){

                    requestAnimationFrame(draw);

                }
                r++;
            }

            requestAnimationFrame(draw);

        }
init();

如果你们能提供任何帮助，我将不胜感激。

谢谢

最佳答案

这是您想要的剪辑顺序:

上下文.保存
定义剪切区域(例如弧线)
绘制图像
上下文.恢复

演示:http://jsfiddle.net/m1erickson/YS45U/

代码:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas = document.getElementById('canvas');
    var c = canvas.getContext('2d');
    var r = 0;

    var img=new Image();
    img.onload=function(){
        draw();
    };
    img.src="http://www.filterforge.com/more/help/images/size200.jpg";

    function draw(){

        // request another animation if not 100%
        if(++r<100){
            requestAnimationFrame(draw);
        }

        // save the unclipped context
        c.save();

        // set the clipping region
        c.beginPath();
        c.arc(100,100,r,0,2*Math.PI,false);
        c.closePath();
        c.clip();

        // draw the image into the clipped region
        c.drawImage(img,0,0);

        // restore the canvas context
        c.restore();

    }

    $("#stop").click(function(){});

}); // end $(function(){});
</script>

</head>

<body>
    <button id="stop">Stop</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

关于javascript - Canvas :在绘制的图像和剪辑之间插入渐变矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21658394/

24

4

0

文章推荐： javascript - 从当前绑定(bind)上下文中检索父属性名称/路径

文章推荐： javascript - WSO2 Jaggery - 如何将数字解析为整数

文章推荐： css - 没有 HTML 的图像淡入淡出 - 仅 CSS

sql - 哪个最快，1x 插入 512 行，4x 插入 128 行，或 512x 插入 1 行
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
sql:删除 + 插入 vs 更新 + 插入
已经提出了类似的问题，但由于它总是取决于，我单独询问我的具体情况。我有一个网站页面，显示来自数据库的一些数据，要从该数据库生成数据，我必须执行一些相当复杂的多连接查询。数据每天(每晚)更新一次。
python - pymongo 插入 vs pymysql 插入
我正在使用 MongoDb 和 MySQL 的 python 连接器 pymongo 和 pymysql 测试 MongoDb 和 MySQL，特别是插入功能。 pymongo版本是3.4，pymys
sql - 大型 SQL 插入 TVF 与 BULK 插入
从 C# 应用程序插入大型数组(10M 元素)的最快方法是什么？到目前为止，我使用的是批量插入。 C# 应用程序生成一个大文本文件，我使用 BULK INSERT 命令加载它。出于好奇，我编写了一个
java - 语法错误 : insert "enum Identifier", 插入 "EnumBody"，插入 "}"
我编写了一个枚举类型，当我为它运行我创建的 JUnit 测试时会出现以下语法错误: java.lang.Error: Unresolved compilation problems: Synt
C二叉搜索树实现——插入
我正在尝试创建一个程序，它将单词列表作为输入，并将它们排序为二叉树，以便能够找到它们，例如像字典。这是我到目前为止所做的，但是 newEl -> el = input; 出现段错误，我知道这是因为它试
latex - 缺少 $ 插入
你好我有编译这个问题 \begin{equation} J = \sum_{j=1}^{C} \end{equation} 我不断收到错误 missing $ inserted 这很奇怪，因
没有主键的 Linq 插入
我需要使用 LINQ to SQL 将记录插入到没有主键的表中。 table 设计得很差；我无法控制表结构。该表由几个 varchar 字段、一个文本字段和一个时间戳组成。它用作其他实体的审计跟踪。
插入 PdfCell 时图像会调整大小
我正在尝试使用 itextsharp 创建 Pdf。我添加了一张包含两列的表格，其中一列包含文本和其他图像。我想要恒定的图像大小如果另一个单元格中的文本增加并且其他单元格中的图像大小不同，我的图像会
php - 插入…………从中选择
我想把 calory 作为 fruits 的第一个值，我做不到，有人能帮忙吗？ $sql = 'INSERT INTO fruits VALUES('', ?, ?, ?)'
r - 插入/扩展季度到月度系列
我有一个包含季度观察结果的 data.frame。我现在想插入每月值(首选三次，线性很好)。中间目标应该是使用 DATE 创建一个 data.frame作为所有每月观察的索引和缺失值。谷歌搜索表明我
sql - 用数组“插入”
我想知道是否有办法在值列表中使用“插入”。我正在尝试这样做: insert into tblMyTable (Col1, Col2, Col3) values('value1', value
Javascript 插入 IFRAME
我想让人们能够在他们的网站中插入单个 Javascript 行，这实际上允许我插入包含我网站内容的固定大小的 IFRAME。它实际上是一个小部件，允许他们搜索我的网站或接收其他信息。这可能吗？最佳答
c# - 插入、选择和更新日期时间
我有一个包含时间的表，列名为 time，数据类型为 Date。在 asp.net 中，我想要一个查询插入日期，另一个查询则在 2 个日期之间进行选择。我已经尝试过这个: string data =
triggers - 触发编译错误(插入)
这是我的代码: create or replace trigger th after insert on stock for each row declare sqty number;
使用存储过程的具有唯一约束的 SQL 插入
这是一个带有具体示例的通用问题。我有一个包含三个字段(流派 ID (PK IDENTITY)、流派和子流派)的表。该表对(流派，子流派)组合具有唯一约束。我想知道如何修改存储过程以在表中不存在时插
Java:插入/替换到特定大小的排序数组
因此，我正在遍历二叉树，节点包含字符串，以及读取文件时该字符串是否出现多次。我只查找读取文件时出现次数最多的前 10 个单词，因此本质上我只是比较 int 值。我的问题是我正在尝试找出一种有效的方法
c++ - 插入 map
我有一张机票和行李 map ，每张门票必须是唯一的，并且必须与 map 上的位置相对应是否可以仅更改行李(m_bagage->秒)而不更改 key ？ std::unordered_map m_c
Java Jdbc 插入
我正在使用 jdbc 驱动程序做一个示例项目。我的问题是，如果我在 2 文本字段中输入空值。 null 不应该加载到数据库中吗？有没有办法避免在数据库中插入空字段？任何帮助将不胜感激。 //Execu
SSIS:插入/更新
我想知道 SSIS 中是否有特定的插入或更新选项。如果我想让程序检查它是更新还是插入，我是否必须做一些编码？或者是否可以启用一个选项，以便它会自行检查 PK 是否存在，然后更新，否则插入？亲切的问

首页

博学

6Ren·AI

商城

javascript - Canvas :在绘制的图像和剪辑之间插入渐变矩形