有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）

请珍惜劳动小编成果，这篇文章是原来小编，转载请注明出处。

于html5中能够使用canvas标签在画布上绘图，先直接上代码，这篇文章先简介一下canvas的用法。简单画几个圆，矩形，三角形，写字。

在代码中均给出了凝视。在这里特别强调的一点是：使用canvas绘图时有时候必须beginPath和colsePath,但有时不须要，为了防止出现故障，能够在每次又一次画一个图时又一次开启路径，画完后关闭路径。

这些代码是在猎豹浏览器上实现的，有些浏览器可能不支持。

<!DOCTYPE html>

<meta charset="utf-8">

<html>

   <body>

   	  <canvas  width="500" height="500" id="canvas" style="background:yellow">

   	         您的浏览器不支持canvas

   	  </canvas>

   	  <script>

           //获取画布

           var canvas=document.getElementById('canvas');

           //alert(canvas);

           //设置画图环境

           var cxt=canvas.getContext('2d');

           //画一条线段

               //開始新路径，第一笔能够不写

                cxt.beginPath();

               //设置画笔宽度

                 cxt.lineWidth=4;

               //设置画笔颜色

                 cxt.strokeStyle="red";

                 //笔从哪開始画

                 cxt.moveTo(20,20);

                 //给出终点

                 cxt.lineTo(100,20);

                 //開始画

                 cxt.stroke();

                 //封闭路径

                 cxt.closePath();

           //画空心圆

                //開始新路径

                cxt.beginPath();

                //路径函数 x,y,r,角度范围,顺时针/逆时针

                cxt.arc(100,100,50,0,360,false);

                cxt.stroke();

                cxt.closePath();

           //画实心圆

                cxt.beginPath();

                //设置填充颜色

                cxt.fillStyle="blue";

                cxt.arc(100,200,50,0,360,false);

                //实心

                cxt.fill();

                //在画个圆，不填充，加边框，可不画

                cxt.stroke();

                cxt.closePath();

           //画矩形

                //矩形函数 x,y,长宽

                cxt.beginPath();

                cxt.rect(200,100,50,60);

                cxt.stroke();

                cxt.closePath();

                //其它方法

                cxt.beginPath();

                cxt.strokeRect(200,190,120,20);

                cxt.closePath();

                //实心矩形

                cxt.beginPath();

                cxt.rect(200,220,50,50);

                cxt.fill();

                cxt.closePath();

                //其它方法

                cxt.fillRect(200,280,50,50);

            //写字

                cxt.font="40px 黑体 ";

                //实心字

                cxt.fillText("暗伤无痕",300,50);

                //空心字

                //将笔触调细

                cxt.lineWidth="1";

                cxt.strokeText("暗伤无痕",300,100);

            //将图片画到画板上  猎豹不支持

                var img=new Image();

                img.src="1.jpg";

                cxt.drawImage(img,300,400,100,100);

            //画一个三角形

                 cxt.beginPath();

                 //移动至開始点

                 cxt.moveTo(300,100);

                 cxt.lineTo(300,200);

                 cxt.lineTo(350,150);

                 cxt.closePath();//三角形须要先闭合路径再画

                 //空心

                 //cxt.stroke();

                 //实心

                 cxt.fill();

            //旋转图片

                //设置旋转环境

                cxt.save();

                   //在异次元空间重置0,0点位置

                   cxt.translate(20,20);

                //图片/x形状旋转

                    //设置旋转角度 參数是弧度，角度 0--360 弧度角度*Math.PI/180

                    //

                    cxt.rotate(-30*Math.PI/180);

                    //旋转线段

                 cxt.beginPath();

                 cxt.lineWidth=4;

                 cxt.moveTo(0,0);

                 cxt.lineTo(20,100);

                 cxt.stroke();

                 cxt.closePath();

                //将旋转后的图片返回原画布

                cxt.restore();

   	  </script>

   </body>

</html>