基于Canvas绘图应用程序布局1

最新推荐文章于 2022-08-18 19:36:17 发布

wangyunsophie

最新推荐文章于 2022-08-18 19:36:17 发布

阅读量462

点赞数 1

文章标签： canvas 应用程序绘图源代码布局

本文链接：https://blog.csdn.net/wangyunsophie/article/details/51833311

版权

今天先做了一部分布局及样式，效果如下：

另附进度1源代码。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>基于canvas的绘图应用程序</title>
    <link rel="shortcut icon" href="picture/图标.ico" type="image/x-icon" />
    <style>
        body
        {
            background-color: #f1ffc6;
            font-size: 100%;
        }
        #canvas1
        {
            position:absolute;
            margin-top: 50px;
            border: thin outset #bfbfbf;
            background-color: white;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
            cursor: crosshair;
        }
        #controls
        {
            position: absolute;
            margin-top: 20px;
            margin-left: 0px;
            font-size: 1.0em;
            
        }
        select
        {
            width: 140px;
            height: 20px;
            padding: 0.1em 0.4em 0.1em 0.5em;
            border: thin inset #3c3131;
            -webkit-border-radius: 0.3em;
            -moz-border-radius: 0.3em;
            border-radius: 0.3em;
            -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            -moz-appearance: none;
            -webkit-appearance: none;
            background: url(picture/按钮1.jpg);
            font-family: Arial,Calibri,Tahoma,Ebrima;
            font-size: 0.8em;
            color: ForestGreen;
        }
        
        #lineWidthSelect
        {
            width: 80px;
            background: url(picture/按钮2.jpg);
        }
        #eraserButton
        {
            position: relative;
            left: 32px;
            width: 50px;
            height: 20px;
            padding: 0.1em 0.2em 0em 0.1em;
            border: thin inset #3c3131;
            -webkit-border-radius: 0.3em;
            -moz-border-radius: 0.3em;
            border-radius: 0.3em;
            -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            -moz-appearance: none;
            -webkit-appearance: none;
            background: url(picture/按钮3.jpg);
            font-family: Arial,Calibri,Tahoma,Ebrima;
            font-size: 0.8em;
            color: black;

        }
    </style>
</head>
<body>

    <div style="width:1000px;margin:0 auto;">
        <canvas id="canvas1" width="1000" height="618">
            Canvas not supported.
        </canvas>
        <div id="controls">
            填充颜色:<select id="fillColorSelect">
                <option value="red">红色</option>
                <option value="green">绿色</option>
                <option value="blue">蓝色</option>
                <option value="orange">橙色</option>
                <option value="yellow">黄色</option>
                <option value="cyan">青色</option>
                <option value="purple">紫色</option>
                <option value="rgba(255,192,203,0.5)">透明的粉红色</option>
                <option value="rgba(75,0,130,0.5)">透明的靛青</option>
                <option value="rgba(119,136,153,0.5)">透明的浅石板灰</option>
                <option value="rgba(240,230,140,0.5)">透明的卡其布色</option>
                <option value="rgba(124,252,0,0.5)">透明的草坪绿</option>
                </select>
            描边颜色:<select id="strokeColorSelect">
                <option value="red">红色</option>
                <option value="green">绿色</option>
                <option value="blue">蓝色</option>
                <option value="orange">橙色</option>
                <option value="yellow">黄色</option>
                <option value="cyan">青色</option>
                <option value="purple">紫色</option>
                <option value="rgba(255,192,203,0.5)">透明的粉红色</option>
                <option value="rgba(75,0,130,0.5)">透明的靛青</option>
                <option value="rgba(119,136,153,0.5)">透明的浅石板灰</option>
                <option value="rgba(240,230,140,0.5)">透明的卡其布色</option>
                <option value="rgba(124,252,0,0.5)">透明的草坪绿</option>
                 </select>
            线宽：<select id="lineWidthSelect">
                <option value="1.0">1.0</option>
                <option value="2.0">2.0</option>
                <option value="3.0">3.0</option>
                <option value="4.0">4.0</option>
                <option value="5.0">5.0</option>
               </select>
            <input id="eraserButton" type="button" value="橡皮擦" />
        </div>
    </div>
    
    
    <script>
        var canvas1 = document.getElementById('canvas1'),
            context1 = canvas1.getContext('2d'),

            GRID_COLOR = 'WhiteSmoke',
            GRID_STEPX = 10,
            GRID_STEPY = 10,
            kong = 0;

        //绘制引导线-----------------------------------------------------------------------------
        function drawGrid(color, stepx, stepy) {
            context1.save();

            context1.strokeStyle = color;
            context1.lineWidth = 0.5;

            for (var i = stepx+0.5; i < canvas1.width; i += stepx) {
                context1.beginPath();
                context1.moveTo(i, 0);
                context1.lineTo(i, canvas1.height);
                context1.stroke();
            }
            for (var i = stepy + 0.5; i < canvas1.height; i += stepy) {
                context1.beginPath();
                context1.moveTo(0, i);
                context1.lineTo(canvas1.width, i);
                context1.stroke();
            }

            context1.restore();
        }


        //初始化-----------------------------------------------------------------------------------
        drawGrid(GRID_COLOR,GRID_STEPX,GRID_STEPY);
    </script>
</body>
</html>