canvas绘制各种基本图形

Canvas绘制各种基本图形

Canvas是HTML5中新增的标签，可以用来绘制各种图形，包括线条、矩形、圆、文字和图像等。本文将介绍如何使用Canvas绘制各种基本图形。

1. 绘制线条

            <canvas id="canvas" width="200" height="200"></canvas>
            <script>
                var canvas=document.getElementById('canvas');
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(10, 10);
                ctx.lineTo(100, 100);
                ctx.stroke();
            </script>
        

以上代码用Canvas绘制了一条从(10, 10)到(100, 100)的线条。

2. 绘制矩形

            <canvas id="canvas" width="200" height="200"></canvas>
            <script>
                var canvas=document.getElementById('canvas');
                var ctx=canvas.getContext('2d');
                ctx.fillRect(10, 10, 80, 80);
            </script>
        

以上代码用Canvas绘制了一个左上角坐标为(10, 10)、宽为80、高为80的矩形。

3. 绘制圆形

            <canvas id="canvas" width="200" height="200"></canvas>
            <script>
                var canvas=document.getElementById('canvas');
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
                ctx.stroke();
            </script>
        

以上代码用Canvas绘制了一个圆心坐标为(100, 100)、半径为50的圆形。

4. 绘制文字

            <canvas id="canvas" width="200" height="200"></canvas>
            <script>
                var canvas=document.getElementById('canvas');
                var ctx=canvas.getContext('2d');
                ctx.font='20px Arial';
                ctx.fillText('Hello, World!', 50, 50);
            </script>
        

以上代码用Canvas绘制了一段文本，字体大小为20px，文字内容为"Hello, World!"，左上角坐标为(50, 50)。