【Canvas】简单的写字板

最新推荐文章于 2024-07-26 15:07:33 发布
邹大叔
最新推荐文章于 2024-07-26 15:07:33 发布
阅读量620
点赞数
分类专栏：小工具文章标签： canvas
小工具专栏收录该内容
8 篇文章 0 订阅
订阅专栏
这里写图片描述
演示地址：点我
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
        <title>写字板</title>
        <style type="text/css">
                body,html {
                        padding: 0;
                        margin: 0;
                }
                a,div,span {
                        font-family:  "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
                }
                .canvas-box {
                        display: block;
                        margin: 40px auto;
                        background: #f5f5f5;
                }
                .color-box {
                        width: 1080px;
                        display: block;
                        margin: 20px auto;
                        text-align: center;
                }
                .color-item {
                        display: inline-block;
                        vertical-align: middle;
                        width: 48px;
                        height: 24px;
                        margin: 10px;
                        background: #989898;
                        cursor: pointer;
                }
                .red {
                        background: #e01d5b;
                }
                .blue {
                        background: #1d6ae0;
                }
                .green {
                        background: #1de087;
                }
                .yellow {
                        background: #f3e41d;
                }
                .orange {
                        background: #f9850b;
                }
                .black {
                        background: #333;
                }
                .color-item.active {
                        border: solid 3px #565656;
                }
                .btn {
                        display: block;
                        width: 120px;
                        height: 40px;
                        line-height: 40px;
                        margin: 10px auto;
                        text-align: center;
                        font-size: 18px;
                        border: solid 1px #999;
                        border-radius: 5px; 
                        cursor: pointer;
                }
        </style>
</head>
<body>
        <canvas class="canvas-box" id="canvas"></canvas> 
        <div class="color-box">
                <span class="color-item red"></span>
                <span class="color-item blue"></span>
                <span class="color-item green"></span>
                <span class="color-item yellow"></span>
                <span class="color-item orange"></span>
                <span class="color-item black active"></span>
        </div>
        <div class="btn" onclick="clearDraw()">清除</div>
<script type="text/javascript">
var        canvas = document.getElementById('canvas');
var        context = canvas.getContext("2d");
var        isDraw = false;  //定义变量控制画笔是否可用
var movePos;                  //定义变量存放初始画笔开始位置
var linWidth = 10;
var linColor = '#333';

window.onload = function(){
        draw();
}

function draw(){

        canvas.width = 500;
        canvas.height = 500;

        context.strokeStyle = "red";
        context.lineWidth = 10;

        context.beginPath();
        context.strokeRect(0,0,500,500);

        //设置画笔颜色，宽度
        context.strokeStyle = "red";
        context.lineWidth = 1;

        //使线段连续，圆滑
        context.lineCap = "round";  
        context.lineJoin = "round";


        drawDashedLine(context,0,0,500,500);

        drawDashedLine(context,0,500,500,0);

        drawLine(context,0,250,500,250);

        drawLine(context,250,0,250,500);
}

//画虚线（参照网上大神）
function drawDashedLine(context, x1, y1, x2, y2, dashLength) {
   dashLength = dashLength === undefined ? 5 : dashLength;
   var deltaX = x2 - x1;
   var deltaY = y2 - y1;
   var numDashes = Math.floor(
     Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);
     for (var i=0; i < numDashes; ++i) {
      context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]       (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
     }
   context.stroke();
};

//画直线
function drawLine(context,x1,y1,x2,y2){
        context.moveTo(x1,y1);
        context.lineTo(x2,y2);
        context.stroke();
};

//获取鼠标相对与canvas位置
function getPos(x,y){
        var box = canvas.getBoundingClientRect();
        return {x: x-box.left,y: y-box.top};
};

//画笔
function drawing(e){
        if(isDraw){
                var position = getPos(e.clientX,e.clientY);
                context.strokeStyle = linColor;
                context.lineWidth = linWidth;
                context.save();        
                context.beginPath();
                context.moveTo(movePos.x,movePos.y);
                context.lineTo(position.x,position.y);
                context.stroke();
                movePos = position;
                context.restore();
        }

}

//鼠标点下
canvas.onmousedown = function(e){
        isDraw = true;
        movePos = getPos(e.clientX,e.clientY);
        drawing(e);
}

//鼠标移动
canvas.onmousemove = function(e){
        drawing(e);
}

//鼠标松开
canvas.onmouseup = function(e){
        isDraw = false;
}

//鼠标离开
canvas.onmouseout =function(e){
        isDraw = false;
}

//选择画笔颜色
$('.color-item').on('click',function(){
        $(this).addClass('active').siblings().removeClass('active');
        linColor = $(this).css('background-color');
});

//清除
function clearDraw(){
        context.clearRect(0,0,500,500);
        draw();
}
</script>
</body>
</html>