Html5新的标签 Canvas学以致用

 （Ps:今天学习下HTML5的新标签Canvas,并随便用它做个动画特效）

　Canvas

　　　　什么是Canvas

　　　　　　　　　　HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

　　　　　　　　<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

　　　　　　　　你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

　　　　创建Canvas

　　　　　　　　一个画布在网页中是一个矩形，通过<canvas>元素来控制

　　　　　　　　

<canvas id="dot-canvas" width="200" height="100"></canvas>

　　　　　　　　注：canvas通过设置id,可以在脚本中用document.getElementByid 获得，且Canvas有width和height属性。

　　　　用javascript绘制Canvas

　　　　　　　　Canvas本身没有绘制的功能，需要通过js绘制

　　　　　　　　如：

1. 1. 1. 　　　　　　　　　　　　

         let canvas=document.getElementById('dot-canvas') //获得Canvas标签
         let ctx=canvas.getContext('2d')  //
         //绘制矩形
         ctx.fillStyle='#fff222'   //填充颜色
         ctx.fillRect(90,45,39,33)  //fillRect(x,y,width,height)  
         

         　　在ctx.fillRect() 中 有四个属性，前两个是坐标x、y（以Canvas的左上角为原点的坐标），

　　　　　　　　　　2. 路径

　　　　　　　　　　　　在Canvas上画线，我们将使用以下两种方法：　　

• • • • • • 　   moveTo(x,y) 定义线条开始坐标
          • 　　lineTo(x,y) 定义线条结束坐标

　　　　　　　　　　　　绘制线条我们必须使用到 "ink" 的方法，就像stroke().

• • • • • • 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.moveTo(0,0);
            ctx.lineTo(200,100);
            ctx.stroke();

          • 画圆用 arc(x,y,r,start,end)

          • var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.arc(10,10,5,0,Math.PI*2);
            ctx.stroke();