欢迎光临
我的个人博客网站

WEB前端第六十六课——H5新特性:canvas图形绘制

1.canvas描述

  canvas(画布)是H5提出的新标签,其目的是用于替代类似flash动画或游戏的插件,

  能够极大地减少页面结构大小,提高页面响应速度。

  说明:

    ⑴ canvas标签仅是一个图形容器,提供了一个可以绘制图像、图形的区域,可以实时渲染

     图形、动画、虚拟图像等,对快速绘图进行了大量优化;

    ⑵ 使用<canvas>标签习惯性在标签内部设置元素大小,以及进行不支持说明;

     示例:<canvas width:300px height:360px><p>浏览器不支持“canvas”!</p></canvas>

     当然,也可以通过CSS设置尺寸属性,还可以通过“if语句”判断浏览器是否支持canvas。

    ⑶ canvas标签除了提供绘图区域外,没有其他行为功能,其内部的所有内容都要通过脚本

     (JavaScript)进行绘制完成;

    ⑷ 使用canvas的基础模板:

<body> <!--创建canvas画布,并设置区域大小-->     <canvas id="myCanvas" width="200" height="300">         您的浏览器不支持Canvas!     </canvas>     <script>     //  获取canvas画布         var canvas=document.getElementById('myCanvas');     //  在画布上创建画笔         var ctx=canvas.getcontext('2d'); /*    //  或通过if语句判断浏览器是否支持canvas         if (canvas.getcontext){             var ctx=canvas.getcontext('2d');         }else {             canvas.innerText='浏览器不支持canvas!';         }*/     //  在画布上绘制图形         ctx.fillRect(10,10,60,60);     </script> </body> 

    ⑸ 绝大部分Canvas的绘图API都没有定义在<canvas>元素本身上,而是定义在通过画布的

     “getContext()”方法获取的“绘图上下文环境”这个对象上;

    ⑹ canvas元素只支持一种原生的图形绘制:矩形,其他所有图形的绘制都至少需要生成一条路径。

2.上屏即像素化

  上屏即像素化是canvas的一个重要特征,是指区域内图形一旦绘制完成,便不能更改,如尺寸、位置等。

   只有通过清除内容再重新绘制的方式,实现改变绘制内容的效果。

  下面以绘制矩形为例。

  绘制矩形的相关方法:

    ⑴ fillRect( x ,y ,width, height),绘制有填充的矩形;

    ⑵ strokeRect( x ,y ,width, height),绘制无填充的矩形;

    ⑶ clearRect( x ,y ,width, height),清除指定矩形内的像素;

    ⑷ rect( x, y, width, height) ,绘制矩形(定义矩形的路径),需要配合stroke()方法完成绘制。

    另外,设置填充绘画的颜色,ctx.fillStyle=’color’;

  代码示例:

<body> <!--创建canvas画布,并设置区域大小-->     <canvas id="myCanvas" width="360" height="360">         您的浏览器不支持Canvas!     </canvas>     <script>     //  获取canvas画布         var canvas=document.getElementById('myCanvas');     //  在画布上创建画笔         var ctx=canvas.getContext('2d');      //  在画布上绘制图形         ctx.fillRect(50,50,60,60);         ctx.strokeRect(30,30,100,100);         ctx.clearRect(70,70,20,20);          ctx.rect(150,150,60,60);         ctx.stroke();       //绘制出rect()方法定义的路径      //  通过反复清除、绘制,达到图像位移的效果。         var position=30;         var direction=1;         var timer=setInterval(function () {             if (position>=230){                 direction=-1;             }else if (position<=10){                 direction=1;             }             switch (direction) {                 case -1:{                     ctx.clearRect(position+19,position+19,102,102);                     ctx.fillRect(position+20,position+20,60,60);                     ctx.strokeRect(position,position,100,100);                     ctx.clearRect(position+40,position+40,20,20);                     position-=20;                 }                 break;                 case 1:{                     position+=20;                     ctx.clearRect(position-21,position-21,102,102);                     if (position<=130) {                         ctx.fillRect(50,50,60,60);                         ctx.strokeRect(30,30,100,100);                         ctx.clearRect(70,70,20,20);                      }                     if (position>150&&position<=210) {                         ctx.rect(150,150,60,60);                         ctx.stroke();                     }                     ctx.fillRect(position+20,position+20,60,60);                     ctx.strokeRect(position,position,100,100);                     ctx.clearRect(position+40,position+40,20,20);                 }                 break;             }         },100);     </script> </body> 

3.路径绘制

  canvas中路径是图形的基本元素,路径是不同颜色、宽度、长度的线段或曲线相连接形成的点线集合。

  绘制路径的一般步骤:

    ⑴ beginPath(),路径绘制开始

    ⑵ moveTo(x,y),设置笔触(落点)的坐标位置

    ⑶ lineTo(x,y),设置线段的终点坐标位置

    ⑷ strokeStyle=’color’,设置笔触绘画的颜色,默认为黑色

    ⑸ stroke(),执行路径绘制

    ⑹ fillStyle=’color’,设置封闭路径内部填充颜色,默认为黑色

    ⑺ fill(),执行颜色填充

      当使用fill()方法时,没有闭合的路径会自动闭合,可以不使用closePath()函数,

      但stroke()方法不会自动闭合路径。

    ⑻ closePath(),路径绘制结束

      使用路径开始和结束方法,可以确保各个路径之间的独立性。

    代码示例:

<body>     <canvas id="myCanvas" width="500" height="300">         <p>Sorry,您的浏览器不支持Canvas!</p>     </canvas>     <script>         var canvas=document.getElementById('myCanvas');         var ctx=canvas.getContext('2d');     //  创建未闭合路径,不进行填充         ctx.beginPath()         ctx.moveTo(70,80);         ctx.lineTo(70,150);         ctx.lineTo(120,150);         ctx.strokeStyle='yellowgreen';         ctx.stroke();         ctx.closePath();     //  创建未闭合路径,进行颜色填充         ctx.beginPath()         ctx.moveTo(170,80);         ctx.lineTo(170,150);         ctx.lineTo(220,150);         ctx.lineTo(270,110);         ctx.fillStyle='yellowgreen';         ctx.fill();         ctx.closePath();     </script> </body> 

  WEB前端第六十六课——H5新特性:canvas图形绘制

 4.圆弧绘制

   绘制圆弧或者圆形,使用“arc()”方法。

  语法:ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

  说明:arc()方法一共有6个参数,表示以(x,y)坐标为圆心、radius为半径、从startAngle角度开始、

     到endAngle角度结束,进行圆弧绘制,anticlockwise参数为布尔值,false表示顺时针绘制,

     true表示逆时针绘制。

     其中,arc()方法中的开始和结束角度单位是“弧度”,而不是度!

     在JS中角度和弧度的换算表达式:radius=(Math.PI/180)*angleDegrees,也就相当于使用

     “0~2”之间的任意数值乘以“Math.PI”得到相应的弧度。

     另外,设置好圆弧路径之后,可以使用“Stroke()”方法进行绘制,也可以使用“fill()”方法填充。

  代码示例:

<body>     <canvas height="300" width="500" id="canvasArc">         您的浏览器不支持Canvas!     </canvas>     <script>         var canvas = document.getElementById('canvasArc');         var ctx = canvas.getContext('2d');         ctx.beginPath();         ctx.arc(200,150,60,0,0.8*Math.PI,true);         ctx.strokeStyle='blue';         ctx.stroke();         ctx.closePath();          ctx.beginPath();         ctx.arc(200,150,60,0,0.8*Math.PI,false);         ctx.strokeStyle='red';         ctx.stroke();         ctx.closePath();          ctx.beginPath();         ctx.arc(200,150,60,1.5*Math.PI,0.3*Math.PI,false);         ctx.fillStyle='lightgreen';         ctx.fill();         ctx.closePath();          ctx.beginPath();         ctx.arc(200,150,60,1.5*Math.PI,0.7*Math.PI,true);         ctx.fillStyle='orange';         ctx.fill();         ctx.closePath();     </script> </body> 

WEB前端第六十六课——H5新特性:canvas图形绘制

5.线型设置

  ⑴ 设置线条宽度

    语法:ctx.lineWidth=value;

  ⑵ 设置线条端点

    语法:ctx.linCap=style;

    说明:

      lineCap有三种样式,butt(默认值)、round(圆形末端)、square(方形末端)

  ⑶ 设置线条连接处样式

    语法:ctx.lineJoin=style;

    说明:

      lineJoin有三种样式,miter(默认值)、round(圆弧形)、bevel(切面形)

  ⑷ 设置线条虚线样式

    语法:ctx.setLineDash([segment1,segment2,segment3,…]);

    说明:

      setLineDash()方法的参数是一个数组,数组内的value依次表示虚线每一节的长度,

      数组内的值将在线条上循环重复使用。

      getLineDash()方法,用于获取当前线条的虚线样式,返回值为数组。

      lineDashOffset()方法,用于设置当前线条第一节的偏移量。

  ⑸ 代码示例:

<body>     <canvas id="canvasLineStyle" width="500" height="300"></canvas>     <script>         var canvas=document.getElementById('canvasLineStyle');         var ctx=canvas.getContext('2d');         ctx.beginPath();         ctx.moveTo(330,25);         ctx.lineTo(399,25);         ctx.lineTo(370,150);         ctx.lineWidth=8;                    //设置线条宽度         // ctx.lineCap='round';             //设置线条端点样式         // ctx.lineJoin='bevel';            //设置线条连接处样式         ctx.setLineDash([3,2,1]);           //设置线条虚线样式         ctx.lineDashOffset=2;               //设置虚线起始位置偏移量         var lineStyle=ctx.getLineDash();    //获取虚线样式         console.log(lineStyle);         ctx.stroke();         ctx.closePath();          ctx.strokeStyle="#e20213";         for (var i=0;i<6; i++){             ctx.lineWidth=2+i*5;            //设置线条宽度             ctx.beginPath();             ctx.moveTo(5+i*50, 25);             ctx.lineTo(5+i*50, 150);             ctx.stroke();             ctx.closePath();         }     </script> </body> 

  WEB前端第六十六课——H5新特性:canvas图形绘制

6.Gradients渐变

  ⑴ 线性渐变

    语法:ctx.createLinearGradient(x1,y1,x2,y2);

    说明:该方法有4个参数,(x1,y1)表示渐变的起点,(x2,y2)表示渐变的终点。

       该方法返回一个Gradient对象。

  ⑵ 径向渐变

    语法:ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);

    说明:该方法有6个参数,(x,y,r)表示以(x,y)为圆心,以r为半径的圆,创建渐变区域。

       该方法返回一个Gradient对象。

  ⑶ 颜色设置

    语法:canvasGradient.addColorStop(position,color);

    说明:该方法有2个参数,position的值为“0~1”之间的任意数,表示渐变颜色的相对位置,

       参数color用于设置渐变色,可以是十六进制颜色值,也可以是rgba()颜色。

  ⑷ 渐变填充

    创建Gradient对象,并设置渐变颜色,然后将Gradient对象赋予“fillStyle”,即可进行绘制填充。

    代码示例:

 

<body>     <canvas height="300" width="1000" id="canvasGradient"></canvas>     <script>         var canvas=document.getElementById('canvasGradient');         var ctx=canvas.getContext('2d');     //  创建线性渐变对象。         var linearGradient=ctx.createLinearGradient(50,50,100,100);     //  线性渐变对象颜色设置。         linearGradient.addColorStop(0,'red');         linearGradient.addColorStop(0.5,'yellow');         linearGradient.addColorStop(1,'yellowgreen');     //  线性渐变绘制。         ctx.beginPath();         ctx.fillStyle=linearGradient;         ctx.fillRect(10,10,150,150);         ctx.closePath();      //  创建径向渐变,外圆包含內圆。         var radialGradient=ctx.createRadialGradient(300,80,10,270,80,80);         radialGradient.addColorStop(0,'red');         radialGradient.addColorStop(0.5,'yellow');         radialGradient.addColorStop(1,'yellowgreen');         ctx.beginPath();         ctx.fillStyle=radialGradient;         ctx.fillRect(200,10,150,150);         ctx.fill();         ctx.closePath();          //  创建径向渐变,外圆不包含內圆。         var radialGradient=ctx.createRadialGradient(500,80,30,600,80,60);         radialGradient.addColorStop(0,'red');         radialGradient.addColorStop(0.5,'yellow');         radialGradient.addColorStop(1,'yellowgreen');         ctx.beginPath();         ctx.fillStyle=radialGradient;         ctx.fillRect(360,10,300,150);         ctx.fill();         ctx.closePath();     </script> </body> 

  WEB前端第六十六课——H5新特性:canvas图形绘制

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第六十六课——H5新特性:canvas图形绘制
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏