码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-04-29 13:14:21      阅读:319      评论:0      收藏:0      [点我收藏+]

标签:style   blog   使用   os   width   2014   

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



玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能),码迷,mamicode.com

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

标签:style   blog   使用   os   width   2014   

原文地址:http://blog.csdn.net/u012116457/article/details/24663905

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!