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

来源：互联网发布：网络用词2017 编辑：程序博客网时间：2024/06/04 18:44

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

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

0 0