IFE第三十四天到第三十六天：我是精明的小卖家（二）（SVG和Canvas练习）

淩亂°似流年 2022-05-15 11:36 156阅读 0赞

![70][]

### Task1（svg小练习） ###

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    
    <rect x="20" y="20" width="250" height="150"
    style="fill:blue;stroke:pink;stroke-width:5;
    fill-opacity:0.1;stroke-opacity:0.9"/>
    
    <circle cx="350" cy="50" r="40" stroke="black"
    stroke-width="2" fill="yellow"/>
    
    <line x1="0" y1="0" x2="500" y2="300"
    style="stroke:rgb(99,99,99);stroke-width:2"/>
    
    <polyline points="100,600 100,450 50,450 120,250 200,450 150,450 150,600"
    style="fill:green;stroke:black;stroke-width:2"/>
    
    <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:50"> It's SVG!
    <animateMotion path="M 0 0 L 200 200" dur="5s" fill="freeze"/>
    </text>
    </g>
    
    </svg>

### Task2（柱状图） ###

![70 1][]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
    </head>
    
    <body>
        <div id="bar-wrapper">
        </div>
    
        <script type="text/javascript" src="bar.js"></script>
        <script>
            var data = [120, 100, 140, 160, 180, 185, 190, 210, 230, 245, 255, 270];
            var bar = document.getElementById("bar-wrapper");
            bar.innerHTML = getBar(data);
        </script>
    
    </body>
    
    </html>

bar.js

### Task3（Canvas小练习） ###

![70 2][]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
        <style type="text/css">
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    
    <body onload="draw()">
        <canvas id="tutorial" width="300" height="150"></canvas>
        <canvas id="tutorial2" width="300" height="150"></canvas>
        <canvas id="tutorial3" width="300" height="150"></canvas>
        <canvas id="tutorial4" width="300" height="150"></canvas>
        <canvas id="tutorial5" width="300" height="150"></canvas>
        <canvas id="tutorial6" width="300" height="150"></canvas>
    
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById('tutorial');
                if (canvas.getContext) {
                    var ctx = canvas.getContext('2d');
                    ctx.strokeRect(5, 5, 50, 50);
                }
                var canvas2 = document.getElementById('tutorial2');
                if (canvas2.getContext) {
                    var ctx = canvas2.getContext('2d');
                    ctx.beginPath();
                    ctx.moveTo(25, 25);
                    ctx.lineTo(250, 125);
                    ctx.closePath();
                    ctx.strokeStyle = "blue";
                    ctx.stroke();
                }
                var canvas3 = document.getElementById('tutorial3');
                if (canvas3.getContext) {
                    var ctx = canvas3.getContext('2d');
                    ctx.beginPath();
                    ctx.arc(150, 75, 50, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.fillStyle = "orange";
                    ctx.fill();
                }
                var canvas4 = document.getElementById('tutorial4');
                if (canvas4.getContext) {
                    var ctx = canvas4.getContext('2d');
                    ctx.font = "32px consals";
                    ctx.fillText("Hello world", 10, 50);
                }
                var canvas6 = document.getElementById('tutorial6');
                if (canvas2.getContext) {
                    var ctx = canvas6.getContext('2d');
                    ctx.beginPath();
                    ctx.lineWidth = 4;
                    ctx.moveTo(225, 130);
                    ctx.lineTo(75, 130);
                    ctx.quadraticCurveTo(20, 110, 85, 75);
                    ctx.quadraticCurveTo(90, 25, 135, 35);
                    ctx.quadraticCurveTo(150, 5, 185, 25);
                    ctx.quadraticCurveTo(230, 20, 240, 80);
                    ctx.quadraticCurveTo(275, 105, 225, 130);
                    ctx.closePath();
                    ctx.strokeStyle = "#000000";
                    ctx.stroke();
                }
            }
    
            function clock() {
                var now = new Date();
                var ctx = document.getElementById('tutorial5').getContext('2d');
                ctx.save();
                ctx.clearRect(0, 0, 150, 150);
                ctx.translate(75, 75);
                ctx.scale(0.4, 0.4);
                ctx.rotate(-Math.PI / 2);
                ctx.strokeStyle = "black";
                ctx.fillStyle = "white";
                ctx.lineWidth = 8;
                ctx.lineCap = "round";
    
                // Hour marks
                ctx.save();
                for (var i = 0; i < 12; i++) {
                    ctx.beginPath();
                    ctx.rotate(Math.PI / 6);
                    ctx.moveTo(100, 0);
                    ctx.lineTo(120, 0);
                    ctx.stroke();
                }
                ctx.restore();
    
                // Minute marks
                ctx.save();
                ctx.lineWidth = 5;
                for (i = 0; i < 60; i++) {
                    if (i % 5 != 0) {
                        ctx.beginPath();
                        ctx.moveTo(117, 0);
                        ctx.lineTo(120, 0);
                        ctx.stroke();
                    }
                    ctx.rotate(Math.PI / 30);
                }
                ctx.restore();
    
                var sec = now.getSeconds();
                var min = now.getMinutes();
                var hr = now.getHours();
                hr = hr >= 12 ? hr - 12 : hr;
    
                ctx.fillStyle = "black";
    
                // write Hours
                ctx.save();
                ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
                ctx.lineWidth = 14;
                ctx.beginPath();
                ctx.moveTo(-20, 0);
                ctx.lineTo(80, 0);
                ctx.stroke();
                ctx.restore();
    
                // write Minutes
                ctx.save();
                ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
                ctx.lineWidth = 10;
                ctx.beginPath();
                ctx.moveTo(-28, 0);
                ctx.lineTo(112, 0);
                ctx.stroke();
                ctx.restore();
    
                // Write seconds
                ctx.save();
                ctx.rotate(sec * Math.PI / 30);
                ctx.strokeStyle = "#D40000";
                ctx.fillStyle = "#D40000";
                ctx.lineWidth = 6;
                ctx.beginPath();
                ctx.moveTo(-30, 0);
                ctx.lineTo(83, 0);
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
                ctx.stroke();
                ctx.fillStyle = "rgba(0,0,0,0)";
                ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
                ctx.fill();
                ctx.restore();
    
                ctx.beginPath();
                ctx.lineWidth = 14;
                ctx.strokeStyle = '#325FA2';
                ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
                ctx.stroke();
    
                ctx.restore();
    
                window.requestAnimationFrame(clock);
            }
    
            window.requestAnimationFrame(clock);
        </script>
    </body>
    
    </html>

### Task4（折线图） ###

![70 3][]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
        <style type="text/css">
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    
    <body>
        <div id="line-wrapper">
            <canvas id="canvas"></canvas>
        </div>
    
        <script type="text/javascript" src="line.js"></script>
        <script>
            var data = [120, 100, 140, 160, 180, 185, 190, 210, 230, 245, 255, 270];
            var line = document.getElementById("line-wrapper");
            getLine(data);
        </script>
    
    </body>
    
    </html>

line.js

这一节下面还有几个task，包括让图表数据可变、绘制多条折线图、绘制多个柱状图，但是我没有继续做。原因是，我感觉接下来的练习已经偏离了练习svg和canvas的初衷。我们不必要去重复造轮子，将来画图表肯定是要用框架进行的。svg和canvas这两个元素，我们只要理解并掌握它们的原理和用法即可，再用它们做更多复杂的东西也不现实。

[70]: /images/20220515/a2d0105f381c4f6cbce06ba9ce69478c.png
[70 1]: /images/20220515/40c6cc4c33014260af35e1833df00780.png
[70 2]: /images/20220515/345699d9996140aead4fb8a5dfee2f83.png
[70 3]: /images/20220515/b772ddf365474881a5490d04ba604494.png