html5＜canvas路径和三角函数的故事＞

待我称王封你为后i 2022-06-15 07:28 122阅读 0赞

<!DOCTYPE html>

<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            canvas\{  
                background: red;  
            \}  
        </style>  
        <script>  
        window.onload = function()\{  
            var canvas = document.getElementById('canvas');  
            var cobj = canvas.getContext('2d');//获取绘图环境  
            cobj.strokeStyle = "\#aa1";  
            cobj.rect(0,0,100,100);//该步只是把信息放入内存当中  
            cobj.stroke();//通知浏览器绘制出图形      
        \}  
        </script>  
    </head>  
    <body>  
        <canvas id="canvas" width=500 height=500>  
            请你升级你的浏览器!  
        </canvas>  
    </body>

</html>

![Image 1][]![Center][]

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            canvas\{  
                background: red;  
            \}  
        </style>  
    </head>  
    <script>  
        window.onload = function()\{  
            var canvas = document.getElementById('canvas');  
            var cobj = canvas.getContext('2d');//获取绘图环境  
            // cobj.moveTo(0,0);  
            // cobj.lineTo(100,100);//该步只是把信息放入内存当中  
            // cobj.stroke();//通知浏览器绘制出图形  
            // cobj.beginPath();//新开一块内存来存放第二段直线，使新的直线不会与原来的直线相连  
            // cobj.lineTo(0,200);//该步只是把信息放入内存当中  
            // cobj.lineTo(100,150);//该步只是把信息放入内存当中  
            // cobj.lineTo(150,270);//该步只是把信息放入内存当中  
            // cobj.closePath();//与beginPath是成对出现的，具有头尾相连的功能，使这里的两条线成三角形  
            // cobj.stroke();//通知浏览器绘制出图形      
  
            //鼠标按下拖动画出图线  
            canvas.onmousedown = function(e)\{  
                var startX = e.layerX;  
                var startY = e.layerY;  
                cobj.moveTo(startX, startY);  
                canvas.onmousemove = function(e)\{  
                    var endX = e.layerX;  
                    var endY = e.layerY;  
                    cobj.lineTo(endX,endY);  
                    cobj.stroke();  
                \}  
                canvas.onmouseup = function()\{  
                    canvas.onmousemove = null;  
                    canvas.onkeyup = null;  
                \}  
  
            \}  
        \}  
        </script>  
    <body>  
    <canvas id="canvas" width=300 height=300>  
         
    </canvas>  
    </body>

</html>

![Image 1][]

![Center 1][]

//画圆形

function drawCircle(x,y,r)\{  
                cobj.beginPath();  
                for(var i=1;i<=360;i++)\{  
                    cobj.lineTo(x+r\*Math.cos(i\*Math.PI/180),y+r\*Math.sin(i\*Math.PI/180));  
                    cobj.stroke();  
                \}  
            \}  
  
             
            
        \}  
        </script>  
    </head>  
    <body>  
        <canvas id="canvas" width=300 height=300>  
             
        </canvas>  
    </body>

</html>

![Image 1][] ![Center 2][]

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            canvas\{  
                background: red;  
            \}  
        </style>  
        <script>  
        window.onload = function()\{  
            var canvas = document.getElementById('canvas');  
            var cobj = canvas.getContext('2d');//获取绘图环境  
            cobj.lineWidth = '10';  
            cobj.lineCap = 'round';  
            cobj.moveTo(10,10);  
            cobj.lineTo(100,100);//该步只是把信息放入内存当中  
            cobj.stroke();//通知浏览器绘制出图形  
        \}  
        </script>  
    </head>  
    <body>  
    <canvas id="canvas" width=300 height=300>  
         
    </canvas>  
    </body>

</html>

![Image 1][] ![Center 3][]

二次贝塞尔曲线

</html>

![Center 4][]

![Image 1][]

鼠标点击下，圆会伸缩变化

![Image 1][]![Center 5][]

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            canvas\{  
                background: red;  
            \}  
        </style>  
        <script>  
            window.onload = function()\{  
                var canvas = document.getElementById('canvas');  
                var cobj = canvas.getContext('2d');//获取绘图环境  
                var angle = 0;  
                cobj.beginPath();  
                cobj.arc(200,200,50,0,2\*Math.PI);//画圆  
                cobj.stroke();  
                cobj.beginPath();  
                cobj.arc(180,180,10,0,2\*Math.PI);  
                cobj.stroke();  
                cobj.beginPath();  
                cobj.arc(180,180,1,0,2\*Math.PI);  
                cobj.stroke();  
                cobj.beginPath();  
                cobj.arc(220,180,10,0,2\*Math.PI);  
                cobj.stroke();  
                cobj.beginPath();  
                cobj.arc(220,180,1,0,2\*Math.PI);  
                cobj.stroke();  
                cobj.beginPath();  
                cobj.arc(200,200,30,0,Math.PI);  
                cobj.stroke();  
                cobj.beginPath();  
                cobj.arc(195,200,3,0,2\*Math.PI);  
                cobj.stroke();  
                cobj.beginPath();  
                cobj.arc(205,200,3,0,2\*Math.PI);  
                cobj.stroke();  
                 
                canvas.onclick = function()\{  
                    setInterval(function()\{  
                        cobj.clearRect(0, 0, 400, 400);  
                        cobj.beginPath();  
                        angle += 0.2;  
                        cobj.arc(200,200,50+30\*Math.sin(angle),0,2\*Math.PI);  
                        cobj.stroke();  
                        cobj.beginPath();  
                        cobj.arc(180,180,10+30\*Math.sin(angle),0,2\*Math.PI);  
                        cobj.stroke();  
                        cobj.beginPath();  
                        cobj.arc(180,180,1,0,2\*Math.PI);  
                        cobj.stroke();  
                        cobj.beginPath();  
                        cobj.arc(220,180,10+30\*Math.sin(angle),0,2\*Math.PI);  
                        cobj.stroke();  
                        cobj.beginPath();  
                        cobj.arc(220,180,1,0,2\*Math.PI);  
                        cobj.stroke();  
                        cobj.beginPath();  
                        cobj.arc(200,200,30+30\*Math.sin(angle),0,Math.PI);  
                        cobj.stroke();  
                        cobj.beginPath();  
                        cobj.arc(195,200,3+30\*Math.sin(angle),0,2\*Math.PI);  
                        cobj.stroke();  
                        cobj.beginPath();  
                        cobj.arc(205,200,3+30\*Math.sin(angle),0,2\*Math.PI);  
                        cobj.stroke();  
                    \},100);  
                \}  
            \}  
        </script>  
    </head>  
    <body>  
    <canvas id="canvas" width=400 height=400>         
    </canvas>  
    </body>

</html>

**指哪打哪**

![Image 1][]![Center 6][]

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            canvas\{  
                background: red;  
            \}  
        </style>  
        <script>  
        window.onload = function()\{  
            var canvas = document.getElementById('canvas');  
            var cobj = canvas.getContext('2d');//获取绘图环境  
            cobj.moveTo(250,400);  
            cobj.strokeStyle = 'teal';  
            cobj.lineWidth = '5';  
            cobj.lineTo(250,360);  
            cobj.stroke();//通知浏览器绘制出图形  
            canvas.onmousemove = function(e)\{  
                var mouseX = e.layerX;  
                var mouseY = e.layerY;  
                var startX = 250;  
                var startY = 400;  
                var angle = Math.atan2((mouseY-startY),(mouseX-startX));  
                cobj.clearRect(0, 0, 500, 500);  
                cobj.beginPath();  
                cobj.moveTo(startX, startY);  
                cobj.lineTo(startX+40\*Math.cos(angle),startY+40\*Math.sin(angle));  
                cobj.stroke();  
            \}  
        \}  
        </script>  
    </head>  
    <body>  
    <canvas id="canvas" width=500 height=500>  
         
    </canvas>  
    </body>

</html>

[Image 1]: 
[Center]: /images/20220615/a7b53272f6b0463196a9ba2b8b46d3b4.png
[Center 1]: /images/20220615/fc7b4ee8f4d34de98696f153cd63bac8.png
[Center 2]: /images/20220615/02433659f0454efc8889212273ccf421.png
[Center 3]: /images/20220615/87106fd8eeba4f26b00fa04b9d2119a5.png
[Center 4]: /images/20220615/c8fdeca72d2040c8a9a414656b53b902.png
[Center 5]: /images/20220615/34fc7c2c3cf1426292dd7429d95adaae.png
[Center 6]: /images/20220615/802460df928d478cb013cdbdf816de35.png