玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）

最新推荐文章于 2022-10-17 16:08:01 发布

光光-Leo

最新推荐文章于 2022-10-17 16:08:01 发布

阅读量4.5k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/u012116457/article/details/24663905

版权

Web 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

请珍惜小编劳动成果，该文章为小编原创，转载请注明出处。

在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>