HTML5-Canvas绘图几何图形

来源：互联网发布：centos 搭建svn服务器编辑：程序博客网时间：2024/04/29 16:25

HTML5-Canvas绘制几何图形

CanvasRenderingContext2D对象，只提供两个方法来绘制几何图形

fillStyle = "颜色"fillRect(float x,float y,float width,float height)strokeStyle = "颜色"lineWidth = 10lineJoin - "meter|round|beve"stokeRect(float x,float y,float width,float height)并没有直接提供其他几何图形(圆形、椭圆、三角)等方法

index.html

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body onload="init()">        <canvas id="can" width="1200" height="300" style="border:1px solid red;"></canvas>        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>        <script type="text/javascript">        function init(){            var can = document.getElementById("can");            var ctx = can.getContext("2d");            ctx.fillStyle="#369";            ctx.fillRect(50,50,100,60);            ctx.strokeStyle = "#c30";            ctx.lineWidth=0;            ctx.lineJoin="miler"            ctx.strokeRect(100,150,100,60)            ctx.lineJoin = "round"            ctx.strokeRect(230,200,100,65)            ctx.lineJoin = "beve"            ctx.strokeRect(200,80,300,65)        }        </script>    </body></html>

0 0