canvas_简单练习

效果图

实现原理：

1.定义canvas标签。

2.获取canvas标签节点，创建canvas2D。

3.在canvas进行画图。

效果代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <canvas id="canvas" width="500" height="500" style="border: 1px solid #aaa;"></canvas>

         <script type="text/javascript">

             var c = document.getElementById("canvas");

             var ctx = c.getContext("2d");

             //矩形

             ctx.fillStyle = "#008000";

             ctx.fillRect(0, 0, 200, 200);

             //文字

             ctx.fillStyle = "#000000";

             ctx.font = "20px Georgia";

             ctx.strokeText("Hello World",200,200);

             ctx.fillText("超人不会飞", 220, 220, 500);

             //圆

             ctx.beginPath();

             ctx.arc(100, 300, 40, 0, 2 * Math.PI);

             ctx.stroke(); //空心圆

             //ctx.fill();//实心圆

             //斜线

             ctx.moveTo(0, 0);

             ctx.lineTo(500,500);

             ctx.stroke();

         </script>

     </body>

 </html>

巴特西

canvas_简单练习

最新文章

热门文章