Fatal编程技术网
  • canvas/
  • Canvas 使用剪辑区域降低画布性能

Canvas 使用剪辑区域降低画布性能

canvas html5-canvas

Canvas 使用剪辑区域降低画布性能,canvas,html5-canvas,Canvas,Html5 Canvas,我使用画布中的粒子发射器创建一些烟雾。一切正常，但设计要求我在画布上添加一个遮罩，以便我们可以看到页面背景。当我添加剪辑区域时，我的性能非常差，尤其是在Safari中。在使用剪辑区域时，我可以做些什么来优化性能 这是没有面具的烟 戴着面具呢 我每次都在渲染循环中绘制一个向量区域 ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(960, 00); ctx.lineTo(960, 500); ctx.lineTo(960 / 2, 550); ctx.

我使用画布中的粒子发射器创建一些烟雾。一切正常，但设计要求我在画布上添加一个遮罩，以便我们可以看到页面背景。当我添加剪辑区域时，我的性能非常差，尤其是在Safari中。在使用剪辑区域时，我可以做些什么来优化性能

这是没有面具的烟

戴着面具呢

我每次都在渲染循环中绘制一个向量区域

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(960, 00);
ctx.lineTo(960, 500);
ctx.lineTo(960 / 2, 550);
ctx.lineTo(0, 500);
ctx.closePath();
ctx.clip();
ctx.restore();
是的，context.clip很贵

可能使用覆盖遮罩而不是剪裁遮罩

由于您只是将覆盖遮罩点放到画布上，因此比计算剪切路径中的像素要快得多

第1步：抽你的烟

!

步骤#2：绘制覆盖遮罩，以隐藏烟雾中不需要的部分

左：覆盖遮罩。
右图：覆盖遮罩的烟雾

示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var maskCanvas=document.createElement（“画布”）；
var maskCtx=maskCanvas.getContext（'2d'）；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/mountain.png";
函数start（）{
makeOverlayMask（）；
var smokeImage=新图像（）；
smokeImage.src="数据：图像/png；Bas64，IvBorwwwwwwwwwwww7，基础64，IvBoBorwwwww7，基础64，IvBorwwww7，基础64，IvBorww0，基础64，IvBorwwwwwwwwwwwwwwwwwww2，wwwwwwZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZBBBBBBBBBBBBZZZZZZZZZZZZZZZZZZZL0VRRD4ZA5P（2）这个词的意思是一个cocovvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv4（4/ott+6+FN6+FN6+fnp6+FN6+FN6+v6+v6+vvvv6+vvvvv6+vvvvvv6+vvvvv6+vvvvvv6+vvvvv6+vvvvvv6+vvvvvvvvvv6+4+vvvvvvvvvvvvvvvvvvvvvvvvvv8 8 8 8 8 ZQU9L0O3M837KI4HYTYKYKWTC3llZUKvBaqhav1BcQfydd2.目前，我在一个研究中发现了一个新的研究成果。一个新的研究发现了一个新的研究成果。一个新的研究发现了一个新的研究成果。5年后的FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5 5/YG5/中国城市社区社区社区社区社区的一个新的一个新的社区社区社区社区社区社区的社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区社区JOPTDMCDDI6VGP4AAOB2M8+bU2.在一个研究中，我们发现了一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一代中国的一代中国的一代医学文文文中，一级（2）一级（2）一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一级，一Dyibijuav+kHLnt文中给出了一个具体的概念。文中给出了一个2个BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBXOJ+h/U5WWWWWWWWWWWZZZZBBBBXXXXXXXXXXXGGGWWWWWWWWWWWWWWWWWWWWWGGGGGGWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWKJMDWGGCFI2U76BT2R+r1fod4ITBDSZ4.中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的1/R79Ga1 1 1（QQQ6）中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的中国FGWC1/wdREQNBMOgVGbB/Yzoy297d1vs9cY+I9XDVTTWLQYEA724LRLUN5JSS1JLCTNWHOTTY7RODA9RVVE9DL/d+N9BG9BUZ3C1NAEZ7NUXG93VUA3XDDNETJLDO+LT/TZWMVZWLYHVDPGITIPWNVRKBKE5D/3P8IMAB3LDj0/A4QAAABJRU5ERKJGG=”；
smokeImage.onload=函数（）{
clearRect（0,0，canvas.width，canvas.height）；

对于（var y=0；y+1，如果您不知道imgur支持CORS，那也只是一个提示。呵呵，现在能够上传并使用imgur的图像要好得多，然后使用dataURL进行演示/回答提琴。@Loktar谢谢。：-）是的，imgur非常适合提供符合CORS标准的图像。我自己使用dropbox.com来提供符合CORS标准的图像。我在演示中留下了发问者代码中的“烟雾”数据URL——除了懒惰（！）之外，没有任何特殊原因。谢谢，叠加掩码更快，这是我更新的笔。

<!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 ctx=canvas.getContext("2d");

    var maskCanvas=document.createElement("canvas");
    var maskCtx=maskCanvas.getContext('2d');

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/mountain.png";
    function start(){

        makeOverlayMask();

        var smokeImage = new Image();
        smokeImage.src = "data:image/png;base64,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";
        smokeImage.onload = function () {

            ctx.clearRect(0,0,canvas.width,canvas.height);
            for(var y=0;y<canvas.height;y+=smokeImage.height){
                ctx.drawImage(smokeImage,canvas.width/2-15,y);
            }
            ctx.drawImage(maskCanvas,0,0);

        }
    }

    function makeOverlayMask(){
        maskCanvas.width=img.width;
        maskCanvas.height=img.height+166;
        //
        maskCtx.drawImage(img,0,166);
        //
        maskCtx.save();
        maskCtx.globalCompositeOperation="destination-out";    
        maskCtx.beginPath();
        maskCtx.moveTo(0, 0);
        maskCtx.lineTo(320, 00);
        maskCtx.lineTo(320, 166);
        maskCtx.lineTo(320 / 2, 183);
        maskCtx.lineTo(0, 166);
        maskCtx.closePath();
        maskCtx.fill();
        maskCtx.restore();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=320 height=300></canvas>
</body>
</html>