canvas 元素用于在网页上绘制图形,支持更换笔迹颜色及大小。
首页 /  web前端 /  html5 / html5 canvas 画板

0 0 347

html5 canvas 画板

canvas 元素用于在网页上绘制图形,支持更换笔迹颜色及大小。

html5 canvas 画板_图一

html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>画板</title>
<style>
body,html{
    margin: 0; padding: 0; overflow: hidden; background:#cccccc;
}
.wrap{ text-align:center ;}
.p1{ color:#bd397c;
 font-size:32px; 
 font-family:YouYuan;
 font-weight: bold;
 line-height:80px;

}

.cnt{
    display:block;

     width:800px;
 height:400px; 
 background:#FFF;
  box-shadow:5px 5px 5px #888888;
  position: absolute;left:50%;margin-left: -400px;
  top:80px;
  border-radius:10px;
}

.delete{
    width:60px;
    height:60px;
    background:url(http://img1.ph.126.net/OzpZDVCfJRWjeRh65ptkhQ==/6597369933333352000.jpg) no-repeat;
    position: absolute; top:20px; right:20px;
    background-size:cover;/*图片覆盖在背景框架上*/
    border-radius:50%;
    box-shadow:0 0 15px #CCC inset;
    box-sizing:border-box;/*通过已设定框架减去边框得到*/
    }
    .delete:active{

        border:2px solid #ccc;

        }

.menu{
    left:70px;
    bottom:50px;
    position:absolute;}
.item{
    width:20px;
    height:20px;
    border-radius:50%;
    position:absolute;top:0px;
    left:0px;
    margin-top:-10px;
    margin-left:-10px;
    transition:all .5s;
    opacity:0;

    }
.item:active{
    border:1px solid #f00;

    }
.it-1{
    transition-delay:0.1s;
    background:#e6233e;

    }

.it-2{
    transition-delay:0.2s;
    background: #378ac5;

    }

.it-3{
    transition-delay:0.3s;
    background:#13b965;

    }

.it-4{
    transition-delay:0.4s;
    background: #FF0;

    }

.it-5{
    transition-delay:0.5s;
    background: #3F0;

    }

.it-6{
    transition-delay:0.6s;
    background:#b53d10;

    }

.it-7{
    transition-delay:0.7s;
    background:#000;

    }
.menu:hover .item{
    opacity:1;}

.menu:hover .it-1{
    top:0px;
    left:-50px;}

.menu:hover .it-2{
    top:-25px;
    left:-43px;}

.menu:hover .it-3{
    top:-43px;
    left:-25px;}

.menu:hover .it-4{
    top:-50px;
    left:0px;}

.menu:hover .it-5{
    top:-43px;
    left:25px;}

.menu:hover .it-6{
    top:-25px;
    left:43px;}

.menu:hover .it-7{
    top:0px;
    left:50px;}

.menu .bg{
    with:30px;
    height:30px;
    position:absolute;
    margin-left:-15px;
    margin-top:-15px;
    top:0; left:0; border-radius:50%;
    }
.menu:hover .bg{
    width:100px; height:100px;
    margin-left:-50px;
    margin-top:-50px;
    }

.color{
    width:60px;
    height:60px;
    display:block;
    background:#e6233e;
    margin-left:-30px;
    margin-top:-30px;
    background: url(http://img1.ph.126.net/WMDq3upNjf-APgkO59MgeQ==/6599297377216122172.jpg) no-repeat top right;
    position: absolute; bottom:-30px; left:0px;
    background-size:60px 60px;/*图片覆盖在背景框架上*/
    border-radius:50%;

    box-sizing: border-box;
    border:1px solid #ccc;

    }
    .clean{
    width:60px;
    height:60px;
    background: url(http://img2.ph.126.net/C_CBraG5KfJc4SFDtcejxA==/6608195724819660074.png) no-repeat;
    position: absolute; bottom:20px; right:100px;
    background-size:cover;/*图片覆盖在背景框架上*/
    border-radius:50%;
    box-shadow:0 0 15px #CCC inset;
    box-sizing:border-box;
    }
    .clean:active{
    border:2px solid #ccc;  
    }
    .pen{
    width:60px;
    height:60px;
    background: url(http://img1.ph.126.net/iEX7eFV2b0Bq6P5g2D4rfQ==/6632744520933009952.png) no-repeat;
    position: absolute; bottom:20px; right:20px;
    background-size:cover;/*图片覆盖在背景框架上*/
    border-radius:50%;
    box-shadow:0 0 15px #CCC inset;
    box-sizing:border-box;
        }
    .pen:active{    
    border:2px solid #ccc;  
        }
    .brush{ position:absolute;
     width:200px;
     margin-left:-100px; 
     bottom:20px; left:50%; 
     line-height:60px; 
     text-align:center
    }
    .brush .b{ 
        background:#000; 
        display: inline-block; 
        vertical-align:middle; 
        border-radius:100%; 
        box-sizing:border-box;
    }
    .brush .b.active{
        border:1px solid #000;
    }
    .brush .b:nth-child(1){
     width:10px; height:10px;
    }
    .brush .b:nth-child(2){
     width:20px; height:20px;
    }
    .brush .b:nth-child(3){ 
        width:25px; height:25px;
    }
    .brush .b:nth-child(4){ 
        width:30px; height:30px;
    }
    .brush .b:nth-child(5){ 
        width:40px; height:40px;
    }
</style>
</head>

<body>
<div class="wrap">
    <span class="p1">画板</span>
    <div class="cnt">
        <canvas id="paint" class="canvas" width="800"  height="400"> </canvas>
         <div class="menu">
                <div class="bg"></div>
                <div class="color"></div>
                <div class="item it-1"></div>
                <div class="item it-2"></div>
                <div class="item it-3"></div>
                <div class="item it-4"></div>
                <div class="item it-5"></div>
                <div class="item it-6"></div>
                <div class="item it-7"></div>

         </div>
         <a href="javascript:;" class="delete"></a>

         <a href="javascript:;" class="clean" data-type="1"></a>
         <a href="javascript:;" class="pen active" data-type="0"></a>
         <div class="brush">
                <a href="javascript:;" class="b active" data-width="1"></a>
                <a href="javascript:;" class="b" data-width="20"></a>
                <a href="javascript:;" class="b" data-width="25"></a>
                <a href="javascript:;" class="b" data-width="30"></a>
                <a href="javascript:;" class="b" data-width="35"></a>
         </div>
    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    var canvas=document.getElementById("paint");
    var ctx=canvas.getContext("2d");
    var drawWidth=1;
    var mouseDrag=false;
    var drawType=0;
    $(".pen,.clean").click(function(){
        $(".pen,.clean").removeClass("active");
        $(this).addClass("active");
        drawType=$(this).data("type");
        })
    $(".item").click(function(){
        var color=$(this).css("background-color");
        $(".brush .b").css({"background":color});
        ctx.strokeStyle=color;
        ctx.fillStyle=color;
        })
    $(".brush .b").click(function(){
        $(".brush .b").removeClass("active");
        $(this).addClass("active");
        drawWidth=$(this).data("width");
        })
    $(".delete").click(function(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        })

    canvas.addEventListener("mousedown",function(e){
        mouseDrag=true;
        ctx.moveTo(e.offsetX,e.offsetY);
        })

    canvas.addEventListener("mousemove",function(e){
        if(mouseDrag){
            if(drawType==1){
                ctx.globalCompositeOperation="destination-out";
            }else{
                ctx.globalCompositeOperation="source-over";   
            }
            ctx.lineWidth=drawWidth;
            ctx.lineTo(e.offsetX,e.offsetY);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(e.offsetX,e.offsetY,drawWidth/2,0,Math.PI*2);
            ctx.fill();
            ctx.beginPath();
            ctx.moveTo(e.offsetX,e.offsetY);
        }
        })
        canvas.addEventListener("mouseup",function(e){
            mouseDrag=false;
    })

</script>
</body>
</html>

关于作者

笔名: 浮尘
下载所需:0 金币 下载 演示

[来源] https://www.qdfuns.com/article/46750/e05dff83a1d8f4958b32bbd9a96cd02a.html

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

容若 2018-05-30 09:03
10
送花
20积分一朵