GVKun编程网logo

Canvas动画+canvas离屏技术（离屏canvas的作用是什么）

6

本文的目的是介绍Canvas动画+canvas离屏技术的详细情况，特别关注离屏canvas的作用是什么的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Canvas动画

本文的目的是介绍Canvas动画+canvas离屏技术的详细情况，特别关注离屏canvas的作用是什么的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Canvas动画+canvas离屏技术的机会，同时也不会遗漏关于Android canvas 里面 paint 旋转 canvas 有锯齿、canvas 如何去除连接处的线？ android canvas、Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器、canvas——离屏的知识。

本文目录一览：

Canvas动画+canvas离屏技术（离屏canvas的作用是什么）

Canvas动画+canvas离屏技术（离屏canvas的作用是什么）

动画

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>canvas</style>
        .canvas{border:1px solid #abcdef;background-color #a9add2}
    bodycanvas class="canvas" id width="600" height="400">您的浏览器不支持canvascanvas>

    script>
        var canvas=document.getElementById("canvas);
         ctxcanvas.getContext(2d);//上下文，绘图环境

         posx0,posy1;
        setInterval(function(){
            posx+=10*dir;
            ctx.clearRect(清屏
            ctx.fillRect(posx,posy,1)">50);

            到达边界之后调整方向
            if(posx>=canvas.width-){
                dir=-;
            }else <=;
            }
        },1)">100);
        

    
    html>

 

鼠标移入方块时，方块停止动画

false;

        绑定鼠标事件
        canvas.onmousemove(e){
             mousexe.offsetX;
             mouseye.offsetY;
            鼠标点击到小方块内部
            ((mousexposx &&<posx+)  (mouseyposy posy)){
                stoptrue方块停下
            }else{
                stop;
            }
        }
        
        setInterval((){
            (!stop){
                posxdir;
            }
            
            ctx.clearRect(>

 

绘制复杂背景

绘制复杂背景
         drawbgfor i;icanvas.width;i){
                 j;jcanvas.height;j){
                    ctx.beginPath();
                    ctx.arc(i,j,1)">52Math.PI,1)">);
                    ctx.stroke();
                }
            }
        }
        drawbg();

        ;
            }
        }

        setInterval(>

画面我截不出来，大概是闪太快了吧

大概效果就是网格状背景在刷新的一瞬间一闪而过

这是因为背景绘制完成之后，在下面方块动画前的清屏过程中被清空掉了

 

解决方案是：可以把绘制背景的函数在每次清屏之后都再次调用一遍

);
                    ctx.stroke();
                }
            }
        }
       

                    drawbg();绘制背景
>

 

 

但是这种做法是非常损耗性能的

在移动端问题会非常明显，可能会造成动画明显的卡顿

 

更好的办法是使用离屏canvas技术来实现

思路就是新增一个canvas作为离屏canvas，将复杂背景绘制在上面

 

 然后每次清屏之后把离屏canvas的背景拷贝到动画canvas上

 

 当然别忘了给离屏的canvas设置为不可见

放出全部代码：

}
        #canvas2display none="canvas2" canvas2canvas2 ctx2canvas2.getContext(在离屏canvas上绘制复杂背景
        ){
                    ctx2.beginPath();
                    ctx2.arc(i,1)">);
                    ctx2.stroke();
                }
            }
        }
        drawbg();绘制背景
       

        清屏
            
            清屏之后把离屏canvas的背景拷贝过来
            ctx.drawImage(canvas2,canvas2.width,canvas2.height,canvas.height);

            ctx.fillRect(posx,1)">>

 

总结

以上是小编为你收集整理的Canvas动画+canvas离屏技术全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

Android canvas 里面 paint 旋转 canvas 有锯齿

Android canvas 里面 paint 旋转 canvas 有锯齿

this.paint.setAntiAlias(true);
        this.paint.setStyle(Paint.Style.STROKE);//设置空心  
     this.paint.setColor(colorCircle);  

       canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG));

     canvas.rotate(xuzhuan);
        RectF oval1 = new RectF(a, b, c, d);
        canvas.drawRect(oval1, this.paint);

canvas 如何去除连接处的线？ android canvas

canvas 如何去除连接处的线？ android canvas

如何解决canvas 如何去除连接处的线？ android canvas？

private Point[] initPoint() {
    Point[] points = new Point[6];
    int[] location1 = {(int) mOneView.getX(),(int) mOneView.getY()};
    int[] location2 = {(int) mTwoView.getX(),(int) mTwoView.getY()};
    int[] location3 = {(int) mThreeView.getX(),(int) mThreeView.getY()};
    int[] location4 = {(int) mFourView.getX(),(int) mFourView.getY()};
    int[] location5 = {(int) mFiveView.getX(),(int) mFiveView.getY()};
    int[] location6 = {(int) mSixView.getX(),(int) mSixView.getY()};
    
    points[0] = new Point(location1[0] + mOneView.getWidth() / 2,location1[1] + mOneView.getWidth() / 2);
    points[1] = new Point(location2[0] + mTwoView.getWidth() / 2,location2[1] + mTwoView.getWidth() / 2);
    points[2] = new Point(location3[0] + mThreeView.getWidth() / 2,location3[1] + mThreeView.getWidth() / 2);
    points[3] = new Point(location4[0] + mFourView.getWidth() / 2,location4[1] + mFourView.getWidth() / 2);
    points[4] = new Point(location5[0] + mFiveView.getWidth() / 2,location5[1] + mFiveView.getWidth() / 2);
    points[5] = new Point(location6[0] + mSixView.getWidth() / 2,location6[1] + mSixView.getWidth() / 2);
    return points;

}

protected void dispatchDraw(Canvas canvas) {    //每次滑动完连接点就重新显示出来
    super.dispatchDraw(canvas);
    Point[] points = initPoint();
    Point startp;
    Point endp;
    for (int i = 0; i < points.length - 1; i++) {
        startp = points[i];
        endp = points[i + 1];
        int wt = (startp.x + endp.x) / 2;
        Point p3 = new Point();
        Point p4 = new Point();
        p3.y = startp.y;
        p3.x = wt;
        p4.y = endp.y;
        p4.x = wt;
        Path path = new Path();
        path.moveto(startp.x,startp.y);
        path.cubicTo(p3.x,p3.y,p4.x,p4.y,endp.x,endp.y);
        canvas.drawPath(path,mPaint);
    }

} enter image description here

---我想去掉图中标记框的圆圈中的连线，但是对canvas不熟悉，谢谢指教---

解决方法

Canvas 在这里没有任何关系，它只是数学......在您绘制的两个相邻点之间绘制曲线（for 循环） - 从一个圆的中心到第二个圆的中心。所以你应该计算这些圆的圆周上的点并在它们之间画线，没有中心

上面需要一些数学运算，但可能有一种更简单的方法 - 首先绘制这些线，然后绘制点，这些点应该用与背景相同的颜色来实现（这里是白色的）。这将使圆的内部空间覆盖在其下方绘制的线的一部分到圆的中心。最简单的方法是将 super.dispatchDraw(canvas); 移动到方法的末尾，导致您的绘图 for 循环首先被执行（如果圆圈是透明的，请记住完成笔划）

Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器

Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器

由于Canvas的 ”忘记式“ 绘图机制（就是它没有维护一份绘制元素的列表）。

如果仅仅检测用户是否点击整个canvas元素，只需在canvas上注册事件就好。

如果是要分别检测canvas里绘制的不同元素的鼠标点击事件，则要用下面的做法，实现一个元素管理器。

一.原理分析

1.canvas元素能提供的一个api是，context.isPointInPath(x,y)，它可以判断参数的点是否在当前路径内。

2.当前路径指的是最近一次调用context.beginPath();当前路径context.closePath();中间部分的路径代码就是当前路径。

3.元素管理器维护一个元素列表，每次用户点击时，都遍历这个列表，为列表里的元素创建路径，与当前点做检测，直到找到相应的元素。

4.元素必须自己实现相应的函数：

//1.创建自身路径：createPath(context);
//2.绘制自身：drawSelf(context);
//3.点击时的时间处理：beClick();

二.效果截图

这是一个简单播放器，点击后，canvas元素的效果（图标）会变化，激活相关事件函数。


三.源代码
本文由 CSDN MIKUScallion 原创，更多canvas案例代码： http://blog.csdn.net/mikuscallion
//图片按钮 var MikuImgBtn = function(x,y,w,h){ this.x = x; this.y = y; this.w = w; this.h = h; this.image; this.beClick; this.createPath = function(context){ context.beginPath(); context.rect(this.x,this.y,this.w,this.h); context.closePath(); }; this.drawSelf = function(context){ //图片按钮 if(this.image !== undefined){ context.drawImage(this.image,this.x,this.h); } }; this.addBeClick= function(beClick){ this.beClick = beClick; } }; //存储管理已经绘制的元素的一个类 //存储的元素必须实现 //1.创建自身路径：createPath(context); //2.绘制自身：drawSelf(context); //3.点击时的时间处理：beClick(); var MikuDrawedobjList = function (){ var objList = []; this.push = function (obj){ objList.push(obj); } this.remove = function(obj){ for(var i = 0;i<objList.length;i++){ var temp = objList[i]; if(temp === obj){ objList.splice(i,1); return i; } } } this.getClickObj = function (context,x,y){ for(var i = 0; i<objList.length; i++){ //obj必须实现这个方法 objList[i].createPath(context); if(context.isPointInPath(x,y)){ return objList[i]; } } } this.drawAll = function (context){ objList.forEach(function(obj){ //obj必须实现这个方法 obj.drawSelf(context); }); } } //页面元素列表         var activeObjList = new MikuDrawedobjList(); ////按键监听//////////////////////////////////////////////////////////////////////            window.onclick = function(e){             var loc = windowToCanvas(e.clientX,e.clientY);             var clickObj = activeObjList.getClickObj(context,loc.x,loc.y);             if(clickObj!== undefined){                 clickObj.beClick();             }         }



canvas——离屏

canvas——离屏

 

 

离屏操作：
1.创建一个新的离屏canvas;
2.把一些复杂额绘画操作（背景），画在离屏canvas上；
3.将离屏canvas通过drawImage（离屏canvas对象，x1,y1,offcanvas.width,offcanvas.height,x2,y2,canvas.width,canvas.height）拷贝到原始的canvas上，减少不断绘制复杂操作，提高性能-----最后使用css：display：none将离屏canvas隐藏；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>离屏canvas</title>
        <style>
            canvas{
                border: 1px solid red;
            }
            #offCanvas{
/*                 display: none; */
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas">您的浏览器不支持canvas</canvas>
        <canvas id="offCanvas">您的浏览器不支持canvas</canvas>
        
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            
            var offCanvas = document.getElementById("offCanvas");
            var offCtx = offCanvas.getContext("2d");
            
            var posx = 0,posy = 0,dir = 1,isMouseInRect = false;
            
            var drawALot = function(){
                for(var k=0;k<20;k++){
                    for(var i=0;i<canvas.width;i+=10){
                        for(var j=0;j<canvas.height;j+=10){
                            offCtx.beginPath();
                            offCtx.arc(i,j,5,0,2*Math.PI,true);
                            offCtx.stroke();
                        }
                    }
                }
            }
            
            canvas.onmousemove = function(e){
                var mouseX = e.offsetX;
                var mouseY = e.offsetY;
                if(mouseX > posx && mouseX < posx + 50 && mouseY > posy && mouseY < posy +50){
                    isMouseInRect = true;
                }else{
                    isMouseInRect = false;
                }
            }
            setInterval(function(){
                if(!isMouseInRect){
                    posx += 10 *dir;
                }
                //清空画布区域
                ctx.clearRect(0,0,canvas.width,canvas.height);
                //drawALot();
                //使用drawImage(canvas对象)拷贝到原始canvas上
                ctx.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);
                ctx.fillRect(posx,posy,50,50);
                if(posx+50 >= canvas.width){
                    dir = -1;
                }else if(posx <=0){
                    dir = 1;
                }
            },100);
            
            drawALot();
        </script>
    </body>
</html>

 

今天关于Canvas动画+canvas离屏技术和离屏canvas的作用是什么的分享就到这里，希望大家有所收获，若想了解更多关于Android canvas 里面 paint 旋转 canvas 有锯齿、canvas 如何去除连接处的线？ android canvas、Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器、canvas——离屏等相关知识，可以在本站进行查询。

本文标签：

上一篇canvas图形变换（canvas图片变形）

下一篇canvas中剪辑、阴影以及曲线的绘制（canvas 线条阴影）

相关文章