首页 HTML/CSS正文

canvas高级部分--事件,阴影,渐变,图片操作

景先 HTML/CSS 2016-01-03 744 0 html5canvas

canvas事件

canvas画出来的图形都是一堆的像素点,因此事件都是以检测像素点的方式添加。

矩形:坐标和四个边检查,判断当前点是否在矩形上

圆:距离和半径作比较

矩形检测

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas矩形  事件检测</title>
    <style>
        body{
            background: #000;
            margin: 0;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        function d2a(n){
            return n*Math.PI/180;
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var x=100;
            var y=100;
            var w=300;
            var h=200;

            gd.fillRect(x,y,w,h);

            oC.onclick=function(ev){
                var downX=ev.clientX;
                var downY=ev.clientY;

                if(downX>x && downX<x+w && downY>y && downY<y+h){
                    alert('ok');
                }
            };

        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas圆形事件检测

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canva圆检测</title>
    <style>
        body{
            background: #000;
            margin: 0;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        function d2a(n){
            return n*Math.PI/180;
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var cx=200;
            var cy=200;
            var r=100;

            gd.arc(cx,cy,r,d2a(0), d2a(360),false);
            gd.fill();

            oC.onclick=function(ev){
                var downX=ev.clientX;
                var downY=ev.clientY;

                var a=cx-downX;
                var b=cy-downY;

                var c=Math.sqrt(a*a+b*b);

                if(c<r){
                    alert('ok');
                }
            };
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

以上写了两种图形的检测方式,比较复杂,因此canvas也自定义了的一个范围检测的函数

gd.isPointInPath(x,y);

下面利用此函数写一个demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gd.isPointInPath</title>
    <style>
        body{
            background: #000;
            margin: 0;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        function d2a(n){
            return n*Math.PI/180;
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            gd.rect(100,100,200,100);
            gd.fill();

            oC.onclick=function(ev){
                var downX=ev.clientX;
                var downY=ev.clientY;

                if(gd.isPointInPath(downX,downY)){
                    alert('ok');
                }
            };
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas阴影

gd.shadowOffsetX = 10;

gd.shadowOffsetY = 10;

gd.shadowColor = "#000";

gd.shadowBlur = 10;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas阴影</title>
    <style>
        body{
            background: #000;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            gd.shadowOffsetX=10;
            gd.shadowOffsetY=10;
            gd.shadowColor='#000';
            gd.shadowBlur=10;

            gd.fillStyle='red';
            gd.fillRect(100,100,100,100);
            
            gd.font='40px a';
            gd.fillText('我是好人',300,300);
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas其他

线性渐变:

var linear= gd.createLinearGradient(x1,y1,x2,y2);

linner.addColorStop(0,'red');

linner.addColorStop(1,'blue');


径向渐变:

var ra = gd.createRadialGradient(x1,y1,r,x2,y2,r2);

ra.addColorStop();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas线性渐变</title>
    <style>
        body{
            background: #000;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var linear=gd.createLinearGradient(700,300,100,300);

            linear.addColorStop(0,'red');
            linear.addColorStop(0.5,'yellow');
            linear.addColorStop(1,'blue');

            gd.fillStyle=linear;
            gd.fillRect(0,0,oC.width,oC.height);
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas径向渐变</title>
    <style>
        body{
            background: #000;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var ra=gd.createRadialGradient(400,300,50,200,100,100);

            ra.addColorStop(0,'red');
            ra.addColorStop(1,'blue');

            gd.fillStyle=ra;
            gd.fillRect(0,0,oC.width,oC.height);
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas图片

平铺图片

gd.createPattern(oImg,方式);


oImg对象    :

    a)用<img />标签获取元素

    b)new Image;    这种方式一定要onload

 方式有:

repeat,repeat-x,repeat-y,no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas图片平铺方式</title>
    <style>
        body{
            background: #000;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var oImg=new Image();

            oImg.onload=function(){
                var cp=gd.createPattern(oImg,'repeat');

                gd.fillStyle=cp;
                gd.fillRect(0,0,oC.width,oC.height);
            };

            oImg.src='http://www.baidu.com/img/baidu_jgylogo3.gif';

        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

导出图片

oC.toDataURL();  以base64的方式导出   默认是个png


oC.toDataURL('image/jpeg');//没有gif类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导出图片</title>
    <style>
        body{
            background: #000;
            text-align: center;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        function d2a(n){
            return n*Math.PI/180;
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var linear=gd.createLinearGradient(-300,-300,400,400);
            linear.addColorStop(0,'red');
            linear.addColorStop(1,'yellow');

            gd.strokeStyle=linear;
            var d=0;
            setInterval(function(){
                gd.save();
                gd.translate(100+100,100+50);
                gd.rotate(d2a(d++));
                gd.strokeRect(-100,-50,200,100);
                gd.restore();
            },16);

            repeatBj();
            function repeatBj(){
                var oImg=new Image();

                oImg.onload=function(){
                    var cp=gd.createPattern(oImg,'repeat');

                    gd.fillStyle=cp;
                    gd.fillRect(0,0,oC.width,oC.height);
                };

                oImg.src='http://www.baidu.com/img/baidu_jgylogo3.gif';
            }

            //导出图片
 var oBtn=document.getElementById('btn1');

            oBtn.onclick=function(){
                var result=oC.toDataURL('image/jpeg');

                var oImg=new Image();

                oImg.src=result;

                document.body.appendChild(oImg);
            };
        };
    </script>
</head>
<body>
<input type="button" value="拍一张" id="btn1">
<br>
    <canvas id="c1" width="400" height="300"></canvas>
</body>
</html>

canvas图片-------很有用

gd.drawImage(oImg,x,y);


oImg对象    :

    a)用<img />标签获取元素

    b)new Image;  

gd.drawImage(oImg,x,y,w,h);


如果只想画图片的一部分:

gd.drawImage(oImg,sx,sy,sw,sh,dx,dy,dw,dh);

s:source   源图片

d:destination  目标图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas图片截取</title>
    <style>
        body{
            background: #000;
            text-align: center;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        function d2a(n){
            return n*Math.PI/180;
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var oImg=new Image();

            oImg.onload=function(){
                gd.drawImage(
                        oImg,
                        158,45,16,53,
                        0,0,16,53
 );
            };

            oImg.src='http://www.baidu.com/img/baidu_jgylogo3.gif';

        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论