Canvas

時間 2019-11-06
標籤 canvas 简体版
原文原文鏈接
<html>
<head>
<title>

</title>
<style>

    .header_box {
        margin-top: 40px;
        text-align: center;
    }
    .header_box input{
        width:60px;
        height:30px;
        border: 1px solid #666;
        margin-left: 8px;
    }
    .header_box span{
        margin-left: 8px;
    }
    .header_box select{
        width:60px;
        height:30px;
        margin-left: 8px;
        color:#444;
        font-size: 16px;
    }
    .header_box button{
        width:60px;
        height:30px;
        margin-left: 8px;
        color:#fff;
        border-radius: 4px;
        background-color: #444;
        border: 0;
        cursor: pointer;
    }
    .header_box button:hover,.footer_box button:hover{
        background-color: #000;
    }
    .canvas_background{
        width:660px;
        height:660px;
        background-color: #333;
        margin: 40px auto;
        position: relative;
    }
    .footer_box{
        text-align: center;
    }
    .footer_box button{
        width:80px;
        height:30px;
        margin-left: 8px;
        color:#fff;
        border-radius: 4px;
        background-color: #444;
        border: 0;
        cursor: pointer;
    }
    .point_box{
        width:9px;
        height:9px;
        position: absolute;
        z-index: 1001;
    }
    .point{
        position: absolute;
        left:0;
        top:0;
        width:9px;
        height:9px;
        background-color: #F9F900;
        border-radius: 9px;
        cursor: pointer;
        display:block;
        z-index: 1003;
    }
    .point:hover{
        box-shadow: 0 0 15px #FFFF37;
    }
    .line{
        position: absolute;
        left:0;
        top:0;
        background-color: #ff00ff;
        width:100px;
        height:0px;
        border: 1px solid #ff00ff;
        transform:rotate(0deg);
        transform-origin:0% 0%;/*定義動畫的旋轉中心點*/
    }
    .line:hover{
        box-shadow: 0 0 6px #ff00ff;
        cursor: pointer;
    }
    .rect{
        margin-top: 50px;
        background-color: #ff00ff;
        width:100px;
        height:0px;
        border: 1px solid #ff00ff;
        transform:rotate(50deg);
        transform-origin:0% 0%;/*定義動畫的旋轉中心點*/
     }
    .rect:hover{
        box-shadow: 0 0 6px #ff00ff;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="rect"></div>
<div class="header_box">
    <span>網格大小：</span><input type="text" id="grid_rows"><span>行</span><input type="text" id="grid_cols"><span>列</span>
    <span>單位長度:</span><input type="text">
    <select>
        <option>cm</option>
        <option>m</option>
    </select>
    <button id="size_btn">肯定</button>
</div>
<div class="canvas_background" id="canvas_background">
    <canvas id="canvas_grid">

    </canvas>
</div>
<div class="footer_box">
    <button id="reset_btn">重置</button>
    <button id="excute_btn">計算</button>
    <button id="export_btn">導出</button>
</div>
</body>
<script src="../static/jquery-1.8.3.min.js"></script>
<script>
    //600
    var canvasGridWidth = 600;
    var canvasWidth = 660;
    var canvasHeight = 660;
    var points_list = [];
    var map = {};
    $('#canvas_grid').attr('width',canvasWidth);
    $('#canvas_grid').attr('height',canvasHeight);
    var ctx=$('#canvas_grid')[0].getContext("2d");
    var imgData=ctx.createImageData(canvasWidth,canvasHeight);

    for(var i=0;i<canvasHeight;i++)
    {
        for(var j=0;j<canvasWidth;j++)
        {
            var x = i*4*canvasWidth + j*4;
            imgData.data[x] = 80;
            imgData.data[x+1] = 80;
            imgData.data[x+2] = 80;
            imgData.data[x+3]= 255;
        }
    }
    ctx.putImageData(imgData,0,0);
    drawGrid(9,9);
    $('#size_btn').on('click',function(){
        ctx.clearRect(0,0,canvasWidth,canvasHeight);
        var rows = parseInt($('#grid_rows').val());
        var cols = parseInt($('#grid_cols').val());
        points_list = [];
        drawGrid(rows,cols);
    })

    function drawGrid(rows,cols){
        var val = 0;
        if(rows > cols){
            val = canvasGridWidth*1.0/(rows-1);
        }else{
            val = canvasGridWidth*1.0/(cols-1);
        }

        var left = 30;
        var right = left+(cols-1)*val;
        var top = 30;
        var bottom = top+(rows-1)*val;
        for(var i=0;i<rows;i++){
            var x1 = parseInt(left);
            var y1 = parseInt(top+i*val);
            var x2 = parseInt(right);
            var y2 = parseInt(top+i*val);
            drawLine(x1,y1,x2,y2);
        }
        for(var j=0;j<cols;j++){
            var x1 = parseInt(left+j*val);
            var y1 = parseInt(top);
            var x2 = parseInt(left+j*val);
            var y2 = parseInt(bottom);
            drawLine(x1,y1,x2,y2);
        }
        drawGridPoints(rows,cols,val);
    }
    function drawGridPoints(rows,cols,val){
        var left = 30;
        var top = 30;
        for(var i=0;i<rows;i++)
        {
            for(var j=0;j<cols;j++){
                var _left = left + j*val;
                var _top = top + i*val;
                points_list.push({
                    'x':_left,
                    'y':_top
                })
            }
        }
    }
    $('#canvas_background').click(function(event){
        var _x = event.offsetX;
        var _y = event.offsetY;
        console.log(_x,_y);
        var esp = 10;
        for(var i=0;i<points_list.length;i++){
            var pos = points_list[i];
            if(_x > pos.x-esp && _x < pos.x+esp && _y > pos.y-esp && _y < pos.y + esp){

                if(typeof map[pos.x+'_'+pos.y] === 'undefined'){
                    //drawCircle(pos.x,pos.y);
                    var _id = pos.x+'_'+pos.y;
                    $(this).append('<div id="'+_id+'" class="point"></div>');
                    drawPointEx($('#'+_id),pos.x,pos.y);
                    map[pos.x+'_'+pos.y] = 1;
                    console.log('add');
                }
            }
        }
    })
    $('#canvas_background').dblclick(function(event){
        for(var i=0;i<points_list.length;i++){
            var pos = points_list[i];
            if(_x > pos.x-esp && _x < pos.x+esp && _y > pos.y-esp && _y < pos.y + esp){

                if(typeof map[pos.x+'_'+pos.y] === 'undefined'){
                    drawCircle(pos.x,pos.y);
                    map[pos.x+'_'+pos.y] = 1;
                    console.log('add');
                }
            }
        }
    })
    function drawCircle(x1,y1){
        ctx.beginPath();
        ctx.arc(x1,y1,5,0,2*Math.PI,true);
        ctx.fillStyle = '#ff0000';
        ctx.strokeStyle = '#ff0000';
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
    }
    function drawLine(x1,y1,x2,y2){
        ctx.beginPath();
        ctx.strokeStyle= '#888';
        ctx.lineWidth = 1;
        ctx.moveTo(x1+0.5,y1+0.5);
        ctx.lineTo(x2+0.5,y2+0.5);
        ctx.closePath();
        ctx.stroke();
    }
    function drawPointEx(ele,x1,y1){
        ele.css({
            'left':(x1-4)+'px',
            'top':(y1-4)+'px'
        })
    }
    function drawLineEx(ele,x1,y1,x2,y2){

    }
    $('#export_btn').click(function(){
        saveAsLocalImage();
    })
    function saveAsLocalImage () {
        var myCanvas = document.getElementById('canvas_grid');
        var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        window.location.href=image;
    }
</script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。