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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了玩转 html5 ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)相关的知识，希望对你有一定的参考价值。

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

在代码中均给出了注释，在这里特别强调的一点是：使用canvas画图时有时候必须beginPath和colsePath,但有时不需要，为了防止出现问题，可以在每次重新画一个图时重新开启路径，画完后关闭路径。

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

[html] view plaincopy技术分享技术分享
 
  1. <!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <html>  
  4.    <body>  
  5.       <canvas  width="500" height="500" id="canvas" style="background:yellow">       
  6.              您的浏览器不支持canvas  
  7.       </canvas>  
  8.       <script>  
  9.            //获取画布  
  10.            var canvas=document.getElementById(‘canvas‘);  
  11.            //alert(canvas);  
  12.            //设置绘图环境  
  13.            var cxt=canvas.getContext(‘2d‘);  
  14.            //画一条线段  
  15.                //开始新路径，第一笔可以不写  
  16.                 cxt.beginPath();  
  17.                //设置画笔宽度  
  18.                  cxt.lineWidth=4;  
  19.                //设置画笔颜色  
  20.                  cxt.strokeStyle="red";  
  21.                  //笔从哪开始画  
  22.                  cxt.moveTo(20,20);  
  23.                  //给出终点  
  24.                  cxt.lineTo(100,20);  
  25.                  //开始画  
  26.                  cxt.stroke();  
  27.                  //封闭路径  
  28.                  cxt.closePath();  
  29.            //画空心圆  
  30.                 //开始新路径  
  31.                 cxt.beginPath();  
  32.                 //路径函数 x,y,r,角度范围,顺时针/逆时针  
  33.                 cxt.arc(100,100,50,0,360,false);  
  34.                 cxt.stroke();   
  35.                 cxt.closePath();  
  36.            //画实心圆  
  37.                 cxt.beginPath();  
  38.                 //设置填充颜色  
  39.                 cxt.fillStyle="blue";  
  40.                 cxt.arc(100,200,50,0,360,false);  
  41.                 //实心  
  42.                 cxt.fill();  
  43.                 //在画个圆，不填充，加边框，可不画  
  44.                 cxt.stroke();   
  45.                 cxt.closePath();   
  46.            //画矩形  
  47.                 //矩形函数 x,y,长宽  
  48.                 cxt.beginPath();  
  49.                 cxt.rect(200,100,50,60);  
  50.                 cxt.stroke();   
  51.                 cxt.closePath();  
  52.                 //其他方法  
  53.                 cxt.beginPath();  
  54.                 cxt.strokeRect(200,190,120,20);  
  55.                 cxt.closePath();  
  56.                 //实心矩形  
  57.                 cxt.beginPath();  
  58.                 cxt.rect(200,220,50,50);  
  59.                 cxt.fill();  
  60.                 cxt.closePath();  
  61.                 //其他方法  
  62.                 cxt.fillRect(200,280,50,50);  
  63.             //写字  
  64.                 cxt.font="40px 黑体 ";  
  65.                 //实心字  
  66.                 cxt.fillText("暗伤无痕",300,50);  
  67.                 //空心字  
  68.                 //将笔触调细  
  69.                 cxt.lineWidth="1";  
  70.                 cxt.strokeText("暗伤无痕",300,100);  
  71.             //将图片画到画板上  猎豹不支持  
  72.                 var img=new Image();  
  73.                 img.src="1.jpg";   
  74.                 cxt.drawImage(img,300,400,100,100);   
  75.             //画一个三角形  
  76.                  cxt.beginPath();  
  77.                  //移动至开始点  
  78.                  cxt.moveTo(300,100);  
  79.                  cxt.lineTo(300,200);  
  80.                  cxt.lineTo(350,150);  
  81.                  cxt.closePath();//三角形需要先闭合路径再画  
  82.                  //空心  
  83.                  //cxt.stroke();  
  84.                  //实心  
  85.                  cxt.fill();  
  86.             //旋转图片  
  87.                 //设置旋转环境  
  88.                 cxt.save();  
  89.                    //在异次元空间重置0,0点位置  
  90.                    cxt.translate(20,20);  
  91.                 //图片/x形状旋转  
  92.                     //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180  
  93.                     //  
  94.                     cxt.rotate(-30*Math.PI/180);  
  95.                     //旋转线段  
  96.                  cxt.beginPath();  
  97.                  cxt.lineWidth=4;  
  98.                  cxt.moveTo(0,0);  
  99.                  cxt.lineTo(20,100);  
  100.                  cxt.stroke();  
  101.                  cxt.closePath();  
  102.                 //将旋转后的图片返回原画布  
  103.                 cxt.restore();  
  104.       </script>  
  105.    </body>  
  106. </html> 

以上是关于玩转 html5 ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)的主要内容，如果未能解决你的问题，请参考以下文章

html5 canvas绘图有啥用

html5 canvas 元素有啥用

HTML5 Canvas - 用随机像素颜色填充形状？

html5 canvas大小怎么无效

如何在UWP用C#实现HTML5中canvas各种画图操作

HTML5用canvas怎么实现动画效果